update：代码提交

b10f132c · matian · 71852390 · b10f132c · b10f132c · b10f132c
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,8 @@
        "query-string": "^7.0.1",
        "vue": "^2.6.14",
        "vue-router": "^3.5.2",
-        "vuex": "^3.6.2"
+        "vuex": "^3.6.2",
+        "xlsx": "^0.17.1"
      },
      "devDependencies": {
        "@rollup/plugin-eslint": "^8.0.1",
@@ -1145,6 +1146,21 @@
        "node": ">= 0.12.0"
      }
    },
+    "node_modules/adler-32": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.2.0.tgz",
+      "integrity": "sha1-aj5r8KY5ALoVZSgIyxXGgT0aXyU=",
+      "dependencies": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.1.0"
+      },
+      "bin": {
+        "adler32": "bin/adler32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/agent-base": {
      "version": "6.0.2",
      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -2177,6 +2193,19 @@
        "url": "https://opencollective.com/browserslist"
      }
    },
+    "node_modules/cfb": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.0.tgz",
+      "integrity": "sha512-sXMvHsKCICVR3Naq+J556K+ExBo9n50iKl6LGarlnvuA2035uMlGA/qVrc0wQtow5P1vJEw9UyrKLCbtIKz+TQ==",
+      "dependencies": {
+        "adler-32": "~1.2.0",
+        "crc-32": "~1.2.0",
+        "printj": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/chalk": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -2237,6 +2266,14 @@
        "co": "4"
      }
    },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/color-convert": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2261,6 +2298,11 @@
      "integrity": "sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==",
      "dev": true
    },
+    "node_modules/commander": {
+      "version": "2.17.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
+      "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg=="
+    },
    "node_modules/concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2316,6 +2358,21 @@
      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
      "dev": true
    },
+    "node_modules/crc-32": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.0.tgz",
+      "integrity": "sha512-1uBwHxF+Y/4yF5G48fwnKq6QsIXheor3ZLPT80yGBV1oEUwpPojlEhQbWKVw1VwcTQyMGHK1/XMmTjmlsmTTGA==",
+      "dependencies": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.1.0"
+      },
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/cross-env": {
      "version": "7.0.3",
      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
@@ -3179,6 +3236,14 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/exit-on-epipe": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
+      "integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/extend-shallow": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
@@ -3209,6 +3274,11 @@
      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
      "dev": true
    },
+    "node_modules/fflate": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.3.11.tgz",
+      "integrity": "sha512-Rr5QlUeGN1mbOHlaqcSYMKVpPbgLy0AWT/W0EHxA6NGI12yO1jpoui2zBBvU2G824ltM6Ut8BFgfHSBGfkmS0A=="
+    },
    "node_modules/file-entry-cache": {
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -3311,6 +3381,14 @@
        "pause-stream": "~0.0.11"
      }
    },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/fs-extra": {
      "version": "8.1.0",
      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
@@ -4813,6 +4891,17 @@
        "node": ">=10.13.0"
      }
    },
+    "node_modules/printj": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz",
+      "integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ==",
+      "bin": {
+        "printj": "bin/printj.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/private": {
      "version": "0.1.8",
      "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -5429,6 +5518,17 @@
      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
      "dev": true
    },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/statuses": {
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
@@ -6131,6 +6231,22 @@
        "semver": "bin/semver"
      }
    },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/word-wrap": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -6146,6 +6262,29 @@
      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
      "dev": true
    },
+    "node_modules/xlsx": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.17.1.tgz",
+      "integrity": "sha512-SrvK+kMEjiVIKYyJSjSIJwzm2cZn8nQWVh708g7O+pTsmgjoa+uYNLEUn7jmwQdMI/ffCHcY5yEvwBXssBwpRA==",
+      "dependencies": {
+        "adler-32": "~1.2.0",
+        "cfb": "^1.1.4",
+        "codepage": "~1.15.0",
+        "commander": "~2.17.1",
+        "crc-32": "~1.2.0",
+        "exit-on-epipe": "~1.0.1",
+        "fflate": "^0.3.8",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/xml2js": {
      "version": "0.4.23",
      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
@@ -7038,6 +7177,15 @@
      "integrity": "sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==",
      "dev": true
    },
+    "adler-32": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.2.0.tgz",
+      "integrity": "sha1-aj5r8KY5ALoVZSgIyxXGgT0aXyU=",
+      "requires": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.1.0"
+      }
+    },
    "agent-base": {
      "version": "6.0.2",
      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -7958,6 +8106,16 @@
      "integrity": "sha512-I56jhWDGMtdILQORdusxBOH+Nl/KgQSdDmpJezYddnAkVOmnoU8zwjTV9xAjMIYxr0iPreEAVylCGcmHCjfaOw==",
      "dev": true
    },
+    "cfb": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.0.tgz",
+      "integrity": "sha512-sXMvHsKCICVR3Naq+J556K+ExBo9n50iKl6LGarlnvuA2035uMlGA/qVrc0wQtow5P1vJEw9UyrKLCbtIKz+TQ==",
+      "requires": {
+        "adler-32": "~1.2.0",
+        "crc-32": "~1.2.0",
+        "printj": "~1.1.2"
+      }
+    },
    "chalk": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -7998,6 +8156,11 @@
      "dev": true,
      "requires": {}
    },
+    "codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA=="
+    },
    "color-convert": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -8019,6 +8182,11 @@
      "integrity": "sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==",
      "dev": true
    },
+    "commander": {
+      "version": "2.17.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
+      "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg=="
+    },
    "concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -8066,6 +8234,15 @@
      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
      "dev": true
    },
+    "crc-32": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.0.tgz",
+      "integrity": "sha512-1uBwHxF+Y/4yF5G48fwnKq6QsIXheor3ZLPT80yGBV1oEUwpPojlEhQbWKVw1VwcTQyMGHK1/XMmTjmlsmTTGA==",
+      "requires": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.1.0"
+      }
+    },
    "cross-env": {
      "version": "7.0.3",
      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
@@ -8718,6 +8895,11 @@
      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
      "dev": true
    },
+    "exit-on-epipe": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
+      "integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw=="
+    },
    "extend-shallow": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
@@ -8745,6 +8927,11 @@
      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
      "dev": true
    },
+    "fflate": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.3.11.tgz",
+      "integrity": "sha512-Rr5QlUeGN1mbOHlaqcSYMKVpPbgLy0AWT/W0EHxA6NGI12yO1jpoui2zBBvU2G824ltM6Ut8BFgfHSBGfkmS0A=="
+    },
    "file-entry-cache": {
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -8815,6 +9002,11 @@
        "pause-stream": "~0.0.11"
      }
    },
+    "frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA=="
+    },
    "fs-extra": {
      "version": "8.1.0",
      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
@@ -9966,6 +10158,11 @@
      "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==",
      "dev": true
    },
+    "printj": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz",
+      "integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ=="
+    },
    "private": {
      "version": "0.1.8",
      "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -10449,6 +10646,14 @@
      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
      "dev": true
    },
+    "ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "requires": {
+        "frac": "~1.1.2"
+      }
+    },
    "statuses": {
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
@@ -11003,6 +11208,16 @@
        }
      }
    },
+    "wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw=="
+    },
+    "word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA=="
+    },
    "word-wrap": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -11015,6 +11230,23 @@
      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
      "dev": true
    },
+    "xlsx": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.17.1.tgz",
+      "integrity": "sha512-SrvK+kMEjiVIKYyJSjSIJwzm2cZn8nQWVh708g7O+pTsmgjoa+uYNLEUn7jmwQdMI/ffCHcY5yEvwBXssBwpRA==",
+      "requires": {
+        "adler-32": "~1.2.0",
+        "cfb": "^1.1.4",
+        "codepage": "~1.15.0",
+        "commander": "~2.17.1",
+        "crc-32": "~1.2.0",
+        "exit-on-epipe": "~1.0.1",
+        "fflate": "^0.3.8",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      }
+    },
    "xml2js": {
      "version": "0.4.23",
      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",

--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
    "query-string": "^7.0.1",
    "vue": "^2.6.14",
    "vue-router": "^3.5.2",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "xlsx": "^0.17.1"
  },
  "devDependencies": {
    "@rollup/plugin-eslint": "^8.0.1",

--- a/src/components/base/AppList.vue
+++ b/src/components/base/AppList.vue
@@ -205,9 +205,9 @@ export default {
      this.loading = true
      httpRequest(params)
        .then(res => {
-          const { data = [], page_info: pageInfo = {} } = res || {}
+          const { list = [], total = 0 } = res.data || {}
-          this.page.total = parseInt(pageInfo.total_number || '')
+          this.page.total = parseInt(total)
-          this.dataList = callback ? callback(data) : data
+          this.dataList = callback ? callback(list) : list
        })
        .catch(() => {
          this.page.total = 0

--- a/src/modules/payment/api.js
+++ b/src/modules/payment/api.js
 import httpRequest from '@/utils/axios'
+// 获取项目列表
+export function getProjectList(data) {
+  return httpRequest.get('/api/finance/v1/projects/list', data)
+}
+// 获取支付过滤条件
+export function getCondition(data) {
+  return httpRequest.get('/api/finance/v1/payments/condition', data)
+}
+// 获取支付列表
+export function getPayList(data) {
+  return httpRequest.get('/api/finance/v1/payments/list', data)
+}
+// 支付列表下载
+export function download(data) {
+  return httpRequest.get('/api/finance//v1/payments/download', data)
+}
-/**
+// 是否允许开具发票
- * 获取商品列表
+export function allowCreate(data) {
- */
+  return httpRequest.post('/api/finance/v1/payments/update-can-invoice', data)
-export function getGoodsList(data) {
+}
-  return httpRequest.post('/api/shop/commodity/spu/search', data).then({})
+// 退费
+export function drawBack(data) {
+  return httpRequest.post('/api/finance/v1/payments/drawback', data)
+}
+// 获取表头
+export function getTableTitle(data) {
+  return httpRequest.get('/api/finance/v1/payments/title-list', data)
+}
+// 设置表头
+export function updateTableTitle(data) {
+  return httpRequest.get('/api/finance/v1/payments/update-title', data)
+}
+// 查看支付详情
+export function payDetail(data) {
+  return httpRequest.get('/api/finance/v1/payments/details', data)
+}
+// 开具发票
+export function createNewTicket(data) {
+  return httpRequest.get('/api/finance/v1/invoices/create', data)
+}
+// 作废发票
+export function cancelTicket(data) {
+  return httpRequest.post('/api/finance/v1/invoices/cancel', data)
+}
+// 确认（取消）单条缴费到账
+export function payConfirm(data) {
+  return httpRequest.get('/api/finance/v1/payments/details-confirm', data)
+}
+// 渠道列表
+export function getChannelList(data) {
+  return httpRequest.get('/api/finance/v1/channels/list', data)
+}
+// // 申请状态
+// export function getApplyStatusList(data) { // 待修改
+//   return httpRequest.get('/api/finance/v1/channels/list', data)
+// }
+// 费用类型
+export function getExpenseList(data) { // 待修改
+  return httpRequest.get('/api/finance/v1/channels/list', data)
 }
--- a/src/modules/payment/components/Channel.vue
+++ b/src/modules/payment/components/Channel.vue
+<!-- 支付详情-渠道信息 -->
+<template>
+  <table border="1" width="1200px" cellspacing="0">
+    <tr>
+      <th>不含税销售金额</th>
+      <td>dfsvasdfc</td>
+      <th>渠道代理费提基数</th>
+      <td>vfdvdav</td>
+      <th>服务费规则</th>
+      <td>dfvdvdfav</td>
+    </tr>
+    <tr>
+      <th>服务费比例</th>
+      <td>dfdsfsef</td>
+      <th>代理服务费</th>
+      <td>fvfdvdfv</td>
+      <th>代理服务费（不含税金额）</th>
+      <td>vfadvdeafv</td>
+    </tr>
+    <tr>
+      <th>户名</th>
+      <td>dfdsfsef</td>
+      <th>账号</th>
+      <td>fvfdvdfv</td>
+      <th>开户行</th>
+      <td>vfadvdeafv</td>
+    </tr>
+    <tr>
+      <th>渠道税率</th>
+      <td colspan="5">dfdsfsef</td>
+    </tr>
+  </table>
+</template>
+<script>
+export default {
+  prop: {
+    payDetailList: {
+      type: Array,
+      default: []
+    }
+  }
+}
+</script>
+<style></style>
--- a/src/modules/payment/components/Collection.vue
+++ b/src/modules/payment/components/Collection.vue
+<!-- 支付详情-收款信息 -->
+<template>
+  <table border="1" width="1200px" cellspacing="0">
+    <tr>
+      <th>应缴金额</th>
+      <td>dfsvasdfc</td>
+      <th>实缴金额</th>
+      <td>vfdvdav</td>
+      <th>代缴金额</th>
+      <td>dfvdvdfav</td>
+    </tr>
+    <tr>
+      <th>手续费</th>
+      <td>dfdsfsef</td>
+      <th>到账金额</th>
+      <td>fvfdvdfv</td>
+      <th>待确认金额</th>
+      <td>vfadvdeafv</td>
+    </tr>
+    <tr>
+      <th>首次缴费金额</th>
+      <td></td>
+      <th>末次缴费金额</th>
+      <td colspan="3"></td>
+    </tr>
+  </table>
+</template>
+<script>
+export default {
+  prop: {
+    payDetailList: {
+      type: Array,
+      default: []
+    }
+  }
+}
+</script>
+<style>
+</style>
\ No newline at end of file
--- a/src/modules/payment/components/Commodity.vue
+++ b/src/modules/payment/components/Commodity.vue
+<!--支付详情-商品信息  -->
+<template>
+  <app-card>
+    <app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange">
+    </app-list>
+  </app-card>
+</template>
+<script>
+// 组件
+import AppList from '@/components/base/AppList.vue'
+import AppCard from '@/components/base/AppCard.vue'
+// 接口
+// import { getOrderList } from '../api'
+export default {
+  components: { AppCard, AppList },
+  prop: {
+    payDetailList: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  computed: {
+    // 列表配置
+    tableOptions() {
+      return {
+        remote: {
+          // httpRequest: getOrderList, // 获取订单列表
+          params: {},
+          beforeRequest: this.beforeRequest
+        },
+        columns: [
+          { label: '商品号', prop: 'id', minWidth: 100 },
+          { label: '商品图片', prop: 'img', align: 'center', minWidth: 100 },
+          { label: '商品名称', prop: 'name', align: 'center', minWidth: 100 },
+          { label: '标准价格', prop: 'standardPrice', align: 'center', minWidth: 100 },
+          { label: '数量', prop: 'num', align: 'center', minWidth: 100 },
+          { label: '实付单价', prop: 'payPrice', align: 'center', minWidth: 100 }
+        ],
+        data: [
+          {
+            id: 'dfSDfsdf',
+            img: 'FDZF',
+            name: 'DSZF',
+            standardPrice: 'FDSZF',
+            num: 'dsff',
+            payPrice: 'aefes'
+          },
+          {
+            id: 'dfSDfsdf',
+            img: 'FDZF',
+            name: 'DSZF',
+            standardPrice: 'FDSZF',
+            num: 'dsff',
+            payPrice: 'aefes'
+          },
+          {
+            id: 'dfSDfsdf',
+            img: 'FDZF',
+            name: 'DSZF',
+            standardPrice: 'FDSZF',
+            num: 'dsff',
+            payPrice: 'aefes'
+          },
+          {
+            id: 'dfSDfsdf',
+            img: 'FDZF',
+            name: 'DSZF',
+            standardPrice: 'FDSZF',
+            num: 'dsff',
+            payPrice: 'aefes'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+  }
+}
+</script>
--- a/src/modules/payment/components/Confirmed.vue
+++ b/src/modules/payment/components/Confirmed.vue
+<!-- 支付详情-已确认列表 -->
+<template>
+  <app-card>
+    <app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange">
+      <template v-slot:table-x>
+          <el-button @click="toDetail">查看</el-button>
+          <el-button>取消到账</el-button>
+      </template>
+    </app-list>
+  </app-card>
+</template>
+<script>
+// 组件
+import AppList from '@/components/base/AppList.vue'
+import AppCard from '@/components/base/AppCard.vue'
+// 接口
+// import { getOrderList } from '../api'
+export default {
+  prop: {
+    payDetailList: {
+      type: Array,
+      default: []
+    }
+  },
+  components: { AppCard, AppList },
+  data() {
+    return {
+    }
+  },
+  computed: {
+    // 列表配置
+    tableOptions() {
+      return {
+        remote: {
+          // httpRequest: getOrderList, // 获取订单列表
+          params: {},
+          beforeRequest: this.beforeRequest
+        },
+        columns: [
+          { label: '#', type: 'index', minWidth: '50px', fixed: 'left' },
+          { label: '支付凭证', prop: 'id', minWidth: 100 },
+          { label: '支付人姓名', prop: 'img', align: 'center', minWidth: 100 },
+          { label: '支付金额', prop: 'name', align: 'center', minWidth: 100 },
+          { label: '支付时间', prop: 'standardPrice', align: 'center', minWidth: 100 },
+          { label: '支付方式', prop: 'num', align: 'center', minWidth: 100 },
+          { label: '支付状态', prop: 'payPrice', align: 'center', minWidth: 100 },
+          { label: '创建日期', prop: 'payPrice', align: 'center', minWidth: 100 },
+          { slots: 'table-x', align: 'center', minWidth: 100 }
+        ],
+        data: [
+          {
+            id: 'dfSDfsdf',
+            img: 'FDZF',
+            name: 'DSZF',
+            standardPrice: 'FDSZF',
+            num: 'dsff',
+            payPrice: 'aefes'
+          },
+          {
+            id: 'dfSDfsdf',
+            img: 'FDZF',
+            name: 'DSZF',
+            standardPrice: 'FDSZF',
+            num: 'dsff',
+            payPrice: 'aefes'
+          },
+          {
+            id: 'dfSDfsdf',
+            img: 'FDZF',
+            name: 'DSZF',
+            standardPrice: 'FDSZF',
+            num: 'dsff',
+            payPrice: 'aefes'
+          },
+          {
+            id: 'dfSDfsdf',
+            img: 'FDZF',
+            name: 'DSZF',
+            standardPrice: 'FDSZF',
+            num: 'dsff',
+            payPrice: 'aefes'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    beforeRequest(params, isReset) {
+      // 重置
+      if (isReset) {
+        params.price_min = ''
+        params.price_max = ''
+      }
+      params.status = this.activeName === '0' ? '' : this.activeName
+      params.price_zone = `${params.price_min || ''},${params.price_max || ''}`
+      return params
+    },
+    // 选择
+    handleSelectionChange(value) {
+      this.multipleSelection = value
+    },
+    toDetail() {
+      this.$router.push({
+        name: 'paydetail'
+      })
+    }
+  }
+}
+</script>
--- a/src/modules/payment/components/MoreSelect.vue
+++ b/src/modules/payment/components/MoreSelect.vue
+<!-- 更多筛选 -->
+<template>
+    <el-form ref="ruleForm" :model="form" :rules="rules">
+     <el-form-item label="跟进人" prop="follow">
+       <el-select v-model="form.follow">
+         <el-option v-for="(item,index) in followList" :key="index" :label="item.label" :value="item.value">
+           {{item.label}}
+         </el-option>
+       </el-select>
+     </el-form-item>
+      <el-form-item label="发票类型" prop="ticketType">
+       <el-select v-model="form.ticketType">
+         <el-option v-for="(item,index) in TicketTypeList" :key="index" :label="item.label" :value="item.value">
+           {{item.label}}
+         </el-option>
+       </el-select>
+      </el-form-item>
+      <el-form-item label="允许开具发票" prop="status">
+        <el-radio-group v-model="form.status">
+          <el-radio>开启</el-radio>
+          <el-radio>关闭</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="首次缴费时间" prop="firstDate">
+        <el-date-picker
+        v-model="form.firstDate"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期">
+    </el-date-picker>
+      </el-form-item>
+      <el-form-item label="末次缴费时间" prop="lastDate">
+        <el-date-picker
+        v-model="form.lastDate"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd HH:mm:ss"
+      size='small'
+      style="width:360px;">
+    </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="$emit('moreSelectVisible')">取消</el-button>
+        <el-button type="primary" @click="onSubmit">确认</el-button>
+      </el-form-item>
+    </el-form>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        follow: '',
+        ticketType: '',
+        status: '',
+        firstDate: '',
+        lastDate: ''
+      },
+      rules: [
+        {},
+        {}
+      ]
+    }
+  },
+  methods: {
+    onSubmit() {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          this.$emit('createTicket', this.form)
+        }
+      })
+    }
+  }
+}
+</script>
+<style></style>
--- a/src/modules/payment/components/Order.vue
+++ b/src/modules/payment/components/Order.vue
+<!-- 支付详情-订单信息 -->
 <template>
  <div>
    <table border="1" width="1200px" cellspacing="0">
@@ -20,7 +21,14 @@
 </template>
 <script>
-export default {}
+export default {
+  prop: {
+    payDetailList: {
+      type: Array,
+      default: []
+    }
+  }
+}
 </script>
 <style></style>
--- a/src/modules/payment/components/ShareQrcode.vue
+++ b/src/modules/payment/components/ShareQrcode.vue
+<!-- 发票二维码 -->
+<template>
+  <el-dialog
+    :title="title"
+    width="700px"
+    :close-on-click-modal="false"
+    @opened="handleOpened"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <div class="qrcode">
+      <div class="qrcode-left">
+        <qrcode-vue :value="value" size="180" ref="qrcode" />
+      </div>
+      <div class="qrcode-right">
+        <h4>分享链接</h4>
+        <el-input readonly :value="value" id="qrcodeValue">
+          <el-button slot="append" data-clipboard-target="#qrcodeValue" ref="copy">复制</el-button>
+        </el-input>
+        <p>可推广至微信、支付宝、QQ等任意渠道</p>
+        <a :href="qrcodeUrl" download="下载二维码">
+          <el-button type="text">下载二维码</el-button>
+        </a>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+// import QrcodeVue from 'qrcode.vue'
+// import Clipboard from 'clipboard'
+export default {
+  // components: { QrcodeVue },
+  props: {
+    title: { type: String, default: '推广' },
+    value: { type: String, default: '' }
+  },
+  data() {
+    return {
+      qrcodeUrl: '',
+      clipboard: null
+    }
+  },
+  methods: {
+    getQrcodeUrl() {
+      this.qrcodeUrl = this.$refs.qrcode.$el
+        .querySelector('canvas')
+        .toDataURL('image/png')
+        .replace('image/png', 'image/octet-stream')
+    },
+    // initClipboard() {
+    //   if (this.clipboard) {
+    //     return
+    //   }
+    //   this.clipboard = new Clipboard(this.$refs.copy.$el)
+    //   this.clipboard.on('success', () => {
+    //     this.$message({ message: '复制成功！', type: 'success' })
+    //   })
+    //   this.clipboard.on('error', () => {
+    //     this.$message({ message: '复制失败，请手动选择复制！', type: 'error' })
+    //   })
+    // },
+    handleOpened() {
+      this.$nextTick(function () {
+        this.initClipboard()
+        this.getQrcodeUrl()
+      })
+    }
+  },
+  destroyed() {
+    this.clipboard && this.clipboard.destroy()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.qrcode {
+  margin: 0 10px 20px;
+  display: flex;
+}
+.qrcode-left {
+  background-color: #f7f8fa;
+  box-sizing: border-box;
+  width: 292px;
+  height: 292px;
+  padding: 56px;
+}
+.qrcode-right {
+  flex: 1;
+  margin-left: 20px;
+  h4 {
+    font-weight: normal;
+    margin-bottom: 12px;
+  }
+  p {
+    font-size: 14px;
+    color: #969799;
+    line-height: 20px;
+    height: 16px;
+    margin: 8px 0;
+  }
+}
+</style>
--- a/src/modules/payment/components/Student.vue
+++ b/src/modules/payment/components/Student.vue
+<!-- 支付详情-学员信息 -->
 <template>
  <div>
    <table border="1" width="1200px" cellspacing="0">
@@ -22,7 +23,14 @@
 </template>
 <script>
-export default {}
+export default {
+  prop: {
+    payDetailList: {
+      type: Array,
+      default: []
+    }
+  }
+}
 </script>
 <style></style>
--- a/src/modules/payment/components/TableHeaderSelect.vue
+++ b/src/modules/payment/components/TableHeaderSelect.vue
+<!-- 表头筛选 -->
+<template>
+  <el-dialog title="表头设置"  width="40%" v-bind="$attrs"
+    v-on="$listeners">
+    <el-form>
+      <el-form-item label="表头名称">
+        <span>隐藏/显示</span>
+      </el-form-item>
+      <div v-for="(item,index) in TableTitleList" :key="index">
+      <el-form-item :label="item.label">
+        <el-switch active-color="#13ce66" v-model="item.status" inactive-color="#ff4949" @change="changeStatus()"></el-switch>
+      </el-form-item>
+      </div>
+    </el-form>
+  </el-dialog>
+</template>
+<script>
+import { getTableTitle } from '../api'
+export default {
+  data() {
+    return {
+      TableTitleList: [
+        { label: 'fjdvhsjid09p90nfv', status: false },
+        { label: 'fjdvhsjop09p9idnfv', status: false },
+        { label: 'fjdvhsjijkjhkuidnfv', status: false },
+        { label: 'fjdvhsjihbggdnfv', status: false },
+        { label: 'fjdvhsjidsfsdfsdnfv', status: false }
+      ]
+    }
+  },
+  mounted() {
+    this.fetchTableList() // 获取表头
+  },
+  methods: {
+    fetchTableList() {
+      getTableTitle().then(res => {
+        if (res.code === 0) {
+          this.tableList = res.data
+        }
+      })
+    },
+    // 改变表头状态
+    changeStatus() {
+      this.status = !this.status
+      this.$emit('changeStatus', status)
+    }
+  }
+}
+</script>
+<style></style>
--- a/src/modules/payment/components/Ticket.vue
+++ b/src/modules/payment/components/Ticket.vue
+<!-- 支付详情-发票表格 -->
 <template>
  <div class="ticketInfo">
    <table border="1" width="1200px" cellspacing="0" v-for="(item, index) in TicketInfoList" :key="index" class="table">
@@ -60,6 +62,12 @@
 <script>
 export default {
+  prop: {
+    payDetailList: {
+      type: Array,
+      default: []
+    }
+  },
  data() {
    return {
      TicketInfoList: [

--- a/src/modules/payment/components/TicketForm.vue
+++ b/src/modules/payment/components/TicketForm.vue
+<!-- 开具发票-->
+<template>
+  <div>
+    <h3>支付信息</h3>
+    <table border="1" width="720px" cellspacing="0" class="table">
+      <tr>
+        <th>客户姓名</th>
+        <td>lisi</td>
+        <th>k客户编号</th>
+        <td>lisi</td>
+        <th>订单编号</th>
+        <td>lisi</td>
+      </tr>
+      <tr>
+        <th>支付状态</th>
+        <td>lisi</td>
+        <th>报名项目</th>
+        <td>lisi</td>
+        <th>应缴金额</th>
+        <td>lisi</td>
+      </tr>
+      <tr>
+        <th>实缴金额</th>
+        <td>lisi</td>
+        <th>交易流水号</th>
+        <td>lisi</td>
+        <th>缴费时间</th>
+        <td>lisi</td>
+      </tr>
+    </table>
+    <el-form label-width="120px" ref="ruleForm" :model="form" :rules="rules">
+      <div class="type" style="border: 1px solid #ccc; margin-bottom: 10px">
+        <el-form-item label="开票类型" prop="toticket_type">
+          <el-radio-group v-model="form.toticket_type">
+            <el-radio :label="1">红字发票</el-radio>
+            <el-radio :label="2" checked>蓝字发票</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </div>
+      <div class="type" style="border: 1px solid #ccc; margin-bottom: 10px">
+        <el-form-item label="抬头类型" prop="people_type">
+          <!-- change事件 -->
+          <el-radio-group v-model="form.people_type">
+            <el-radio :label="1">企业</el-radio>
+            <el-radio :label="2">非营利单位</el-radio>
+            <el-radio :label="3">个人</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </div>
+      <div class="type" style="border: 1px solid #ccc; margin-bottom: 10px">
+        <el-form-item label="发票信息" label-width="100px" class="title">
+          <el-button type="text" style="float: right">历史开票信息</el-button>
+        </el-form-item>
+        <el-form-item label="发票类型" prop="invoice_type">
+          <!-- change事件 -->
+          <el-select v-model="form.invioce_type" placeholder="请选择发票类型" size="small">
+            <el-option label="普通纸质发票" :value="1"></el-option>
+            <el-option label="普通电子发票" :value="2"></el-option>
+            <!-- 纸质专票企业可以开 -->
+            <el-option label="专用纸质发票" :value="3" v-show="form.people_type === '1'"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="纳税人名称" prop="taxpayer_name">
+          <el-input v-model="form.taxpayer_name"></el-input>
+        </el-form-item>
+        <!-- 企业发票显示税号 -->
+        <el-form-item label="纳税人识别号" prop="taxpayer_identifier" v-show="form.people_type === '1'">
+          <el-input v-model="taxpayer_identifier"></el-input>
+        </el-form-item>
+        <div v-show="form.people_type === '1' && form.invioce_type === '3' " >
+        <el-form-item label="地址" prop="taxpayer_address">
+          <el-input v-model="form.taxpayer_address"></el-input>
+        </el-form-item>
+        <el-form-item label="电话" prop="taxpayer_mobile">
+          <el-input v-model="form.taxpayer_mobile"></el-input>
+        </el-form-item>
+        <el-form-item label="开户行" prop="taxpayer_bank_name">
+          <el-input v-model="form.taxpayer_bank_name"></el-input>
+        </el-form-item>
+        <el-form-item label="银行账号" prop="taxpayer_bank_account">
+          <el-input v-model="form.taxpayer_bank_account"></el-input>
+        </el-form-item>
+        </div>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark"></el-input>
+        </el-form-item>
+        <el-form-item label="收票信息">
+          <span>请填写邮箱地址，方便接收电子发票</span>
+        </el-form-item>
+        <!-- 电子发票显示邮箱 -->
+        <el-form-item label="邮寄地址" prop="recipient_address" v-show="form.people_type === '2'">
+          <el-input v-model="form.recipient_address"></el-input>
+        </el-form-item>
+        <el-form-item label="收件人名称" prop="recipient_name">
+          <el-input v-model="form.recipient_name"></el-input>
+        </el-form-item>
+        <el-form-item label="收件人手机号" prop="recipient_mobile">
+          <el-input v-model="form.recipient_mobile"></el-input>
+        </el-form-item>
+        <el-form-item label="票据跟进人" prop="follow">
+          <el-input v-model="form.follow"></el-input>
+        </el-form-item>
+      </div>
+      <el-form-item>
+        <el-button size="mini" @click="$emit('ticketVisible')">取消</el-button>
+        <el-button type="primary" @click="onSubmit" size="mini">提交</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    ticketVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      form: {
+        toticket_type: '',
+        people_type: '',
+        ticket_type: '',
+        taxpayer_name: '',
+        taxpayer_num: '',
+        address: '',
+        phone: '',
+        bank: '',
+        account: '',
+        mail_address: '',
+        recipient_name: '',
+        recipient_phone: '',
+        follow: ''
+      },
+      rules: {
+        toticket_type: [{ required: true, message: '请选择开票类型', trigger: 'change' }],
+        people_type: [{ required: true, message: '请选择抬头类型', trigger: 'change' }],
+        ticket_type: [{ required: true, message: '请选择发票类型', trigger: 'change' }],
+        taxpayer_name: [
+          { required: true, message: '请输入纳税人名称', trigger: 'blur' },
+          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+        ],
+        taxpayer_num: [
+          { required: true, message: '请输入纳税人识别号', trigger: 'blur' },
+          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
+        ],
+        address: [
+          { required: true, message: '请输入地址', trigger: 'blur' },
+          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
+        ],
+        phone: [
+          { required: true, message: '请输入电话', trigger: 'blur' },
+          { min: 11, max: 11, message: '长度在 11 个字符', trigger: 'blur' }
+        ],
+        bank: [
+          { required: true, message: '请输入开户行', trigger: 'blur' },
+          { min: 4, max: 10, message: '长度在 4 到 10 个字符', trigger: 'blur' }
+        ],
+        account: [
+          { required: true, message: '请输入活动名称', trigger: 'blur' },
+          { min: 19, max: 19, message: '长度在 19 个字符', trigger: 'blur' }
+        ],
+        mail_address: [
+          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+          { min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur' }
+        ],
+        recipient_name: [
+          { required: true, message: '请输入收件人名称', trigger: 'blur' },
+          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
+        ],
+        recipient_phone: [
+          { required: true, message: '请输入收件人手机号', trigger: 'blur' },
+          { min: 11, max: 11, message: '长度 11 个字符', trigger: 'blur' }
+        ],
+        follow: [
+          { required: true, message: '请输入跟进人', trigger: 'blur' },
+          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    // 提交开票信息
+    onSubmit() {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          this.$emit('createTicket', this.form)
+        }
+      })
+    }
+  }
+}
+</script>
+<style>
+.table {
+  margin-bottom: 20px;
+}
+</style>
--- a/src/modules/payment/components/Toconfirm.vue
+++ b/src/modules/payment/components/Toconfirm.vue
+<!-- 待确认列表 -->
+<template>
+<app-card><app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange"><template v-slot:table-x><el-button @click="toDeal">处理</el-button></template></app-list></app-card>
+</template>
+<script>
+// 组件
+import AppList from '@/components/base/AppList.vue'
+import AppCard from '@/components/base/AppCard.vue'
+// 接口
+// import { getOrderList } from '../api'
+export default {
+  prop: {
+    payDetailList: {
+      type: Array,
+      default: []
+    }
+  },
+  components: { AppCard, AppList },
+  data() {
+    return {
+    }
+  },
+  computed: {
+    // 列表配置
+    tableOptions() {
+      return {
+        remote: {
+          // httpRequest: getOrderList, // 获取订单列表
+          params: {},
+          beforeRequest: this.beforeRequest
+        },
+        columns: [
+          { label: '#', type: 'index', minWidth: '50px', fixed: 'left' },
+          { label: '支付凭证', prop: 'id', minWidth: 100 },
+          { label: '支付人姓名', prop: 'img', align: 'center', minWidth: 100 },
+          { label: '支付金额', prop: 'name', align: 'center', minWidth: 100 },
+          { label: '支付时间', prop: 'standardPrice', align: 'center', minWidth: 100 },
+          { label: '支付方式', prop: 'num', align: 'center', minWidth: 100 },
+          { label: '其他支付方式', prop: 'num', align: 'center', minWidth: 100 },
+          { label: '交易流水号', prop: 'num', align: 'center', minWidth: 100 },
+          { label: '支付状态', prop: 'payPrice', align: 'center', minWidth: 100 },
+          { label: '创建日期', prop: 'payPrice', align: 'center', minWidth: 100 },
+          { slots: 'table-x', align: 'center', minWidth: 100 }
+        ],
+        data: [
+          {
+            id: 'dfSDfsdf',
+            img: 'FDZF',
+            name: 'DSZF',
+            standardPrice: 'FDSZF',
+            num: 'dsff',
+            payPrice: 'aefes'
+          },
+          {
+            id: 'dfSDfsdf',
+            img: 'FDZF',
+            name: 'DSZF',
+            standardPrice: 'FDSZF',
+            num: 'dsff',
+            payPrice: 'aefes'
+          },
+          {
+            id: 'dfSDfsdf',
+            img: 'FDZF',
+            name: 'DSZF',
+            standardPrice: 'FDSZF',
+            num: 'dsff',
+            payPrice: 'aefes'
+          },
+          {
+            id: 'dfSDfsdf',
+            img: 'FDZF',
+            name: 'DSZF',
+            standardPrice: 'FDSZF',
+            num: 'dsff',
+            payPrice: 'aefes'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    // beforeRequest(params, isReset) {
+    //   // 重置
+    //   if (isReset) {
+    //     params.price_min = ''
+    //     params.price_max = ''
+    //   }
+    //   params.status = this.activeName === '0' ? '' : this.activeName
+    //   params.price_zone = `${params.price_min || ''},${params.price_max || ''}`
+    //   return params
+    // },
+    // // 选择
+    // handleSelectionChange(value) {
+    //   this.multipleSelection = value
+    // },
+    // 处理
+    toDeal() {
+      console.log('111')
+      this.$router.push({
+        name: 'deal'
+      })
+    }
+  }
+}
+</script>
--- a/src/modules/payment/index.js
+++ b/src/modules/payment/index.js
@@ -14,6 +14,18 @@ const routes = [
        path: 'payment/:id',
        component: () => import('./views/Detail.vue'),
        meta: { title: '支付详情' }
+      },
+      {
+        name: 'deal',
+        path: 'deal',
+        component: () => import('./views/Deal.vue'),
+        meta: { title: '支付详情' }
+      },
+      {
+        name: 'paydetail',
+        path: 'paydetail',
+        component: () => import('./views/PayDetail.vue'),
+        meta: { title: '支付详情' }
      }
    ]
  }

--- a/src/modules/payment/views/Deal.vue
+++ b/src/modules/payment/views/Deal.vue
+<template>
+  <div>
+    <app-card title="支付明细信息">
+      <table border="1" width="1200px" cellspacing="0">
+        <tr>
+          <th>支付人姓名</th>
+          <td>dsfrsfc</td>
+          <th>费用类型</th>
+          <td>是的v方式地方vc</td>
+          <th>支付金额</th>
+          <td>21313</td>
+          <th>支付状态</th>
+          <td>个大哥大哥v那边</td>
+        </tr>
+        <tr>
+          <th>支付方式</th>
+          <td></td>
+          <th>其他支付方式</th>
+          <td></td>
+          <th>支付时间</th>
+          <td colspan="3"></td>
+        </tr>
+        <tr>
+          <td></td>
+          <td colspan="7">是的方式为非阿法尔</td>
+        </tr>
+        <tr>
+          <th>项目</th>
+          <td></td>
+          <th>销售</th>
+          <td></td>
+          <th>渠道</th>
+          <td colspan="3"></td>
+        </tr>
+        <tr>
+          <th>备注</th>
+          <td colspan="7">dfsdfs</td>
+        </tr>
+        <tr>
+          <th>创建时间</th>
+          <td colspan="3">5</td>
+          <th>到账时间</th>
+          <td colspan="3"></td>
+        </tr>
+      </table>
+    </app-card>
+    <app-card>
+      <el-form ref="formRef" :model="form" :rules="formRules">
+        <el-form-item label="支付状态" label-width="80px" prop="payStatus">
+          <el-select v-model="form.payStatus">
+            <el-option label="已支付" :value="1"></el-option>
+            <el-option label="未支付" :value="2"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="手续费" label-width="80px" prop="commission">
+          <el-input size="mini" v-model="form.commission"></el-input>
+        </el-form-item>
+        <el-form-item label="到账时间" label-width="80px" prop="date">
+          <el-date-picker
+            v-model="form.date"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期时间"
+            end-placeholder="结束日期时间"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            size="small"
+            style="width: 360px"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="备注" label-width="80px" prop="remark">
+          <el-input size="mini" v-model="form.remark"> </el-input>
+        </el-form-item>
+        <el-form-item label="到账凭证" label-width="80px" prop="document">
+          <el-upload class="upload-demo"
+          drag action="https://jsonplaceholder.typicode.com/posts/"
+          multiple
+          :file-list="fileList"
+        accept=".xls,.xlsx"
+          :before-upload="beforeUpload"
+        :http-request="fetchFileUpload" >
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+            <div class="el-upload__tip" slot="tip">只能上传excel文件</div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" style="margin-left: 200px" @click="dealPay">提交</el-button>
+        </el-form-item>
+      </el-form>
+    </app-card>
+  </div>
+</template>
+<script>
+import AppCard from '@/components/base/AppCard.vue'
+import { payConfirm } from '../api'
+import { splitStrLast } from '@/utils/util'
+export default {
+  components: { AppCard },
+  data() {
+    return {
+      form: {
+        commission: '',
+        payStatus: '',
+        date: '',
+        remark: '',
+        document: ''
+      },
+      rules: {
+        payStatus: [
+          { required: true, message: '请选择支付状态', trigger: 'change' }
+        ],
+        commission: [
+          { required: true, message: '请输入手续费', trigger: 'blur' },
+          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
+        ],
+        document: [
+          { required: true, message: '请上传到账凭证', trigger: 'change' }
+        ]
+      },
+      importDisabled: false
+    }
+  },
+  computed: {
+    // 列表配置
+    tableOptions() {
+      return {
+        remote: {
+          // httpRequest: getOrderList, // 获取订单列表
+          params: {},
+          beforeRequest: this.beforeRequest
+        },
+        filters: [
+          {
+            type: 'select',
+            prop: 'project',
+            options: this.payState,
+            labelKey: 'project_name',
+            valueKey: 'project_id',
+            placeholder: '支付状态'
+          },
+          {
+            type: 'input',
+            prop: 'spu_name',
+            placeholder: '手续费'
+          },
+          { prop: 'date', slots: 'filter-date' },
+          {
+            type: 'input',
+            prop: 'spu_name',
+            placeholder: '备注'
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    this.dealPay()
+  },
+  methods: {
+    beforeUpload(file) {
+      const suffix = splitStrLast(file.name, '.')
+      if (!['xlsx', 'xls'].includes(suffix)) {
+        this.$message.error('只能上传excel文件')
+        return false
+      } else {
+        return true
+      }
+    },
+    fetchFileUpload(data) {
+      const formData = new window.FormData()
+      formData.append('file', data.file)
+      this.importDisabled = true
+    },
+    dealPay() {
+      this.$refs.formRef.validate(valid => {
+        if (valid) {
+          payConfirm().then(res => {})
+        }
+      })
+    }
+  }
+}
+</script>
+<style></style>
--- a/src/modules/payment/views/Detail.vue
+++ b/src/modules/payment/views/Detail.vue
 <template>
  <div>
    <app-card title="订单信息">
-      <Order :detailList="detailList" />
+      <Order :dealList= "dealList" />
    </app-card>
    <app-card title="学员信息">
-      <Student :detailList="detailList" />
+      <Student :dealList= "dealList" />
+    </app-card>
+    <app-card title="收款信息">
+      <Collection :dealList= "dealList" />
    </app-card>
    <app-card title="发票信息">
-      <Ticket :detailList="detailList" />
+      <Ticket :dealList= "dealList" />
+    </app-card>
+    <app-card title="渠道信息">
+      <Channel :dealList= "dealList" />
+    </app-card>
+    <app-card title="商品信息">
+      <Commodity :dealList= "dealList" />
+    </app-card>
+    <app-card title="支付待确认记录">
+      <Toconfirm :dealList= "dealList" />
+    </app-card>
+    <app-card title="支付确认记录">
+      <Confirmed :dealList= "dealList" />
    </app-card>
  </div>
 </template>
@@ -17,23 +32,30 @@
 import AppCard from '@/components/base/AppCard.vue'
 import Order from '../components/Order.vue'
 import Student from '../components/Student.vue'
+import Collection from '../components/Collection.vue'
 import Ticket from '../components/Ticket.vue'
+import Channel from '../components/Channel.vue'
+import Commodity from '../components/Commodity.vue'
+import Toconfirm from '../components/Toconfirm.vue'
+import Confirmed from '../components/Confirmed.vue'
+import { payDetail } from '../api'
 export default {
-  components: { AppCard, Order, Student, Ticket },
+  components: { AppCard, Order, Student, Collection, Ticket, Channel, Commodity, Toconfirm, Confirmed },
  data() {
    return {
+      id: '',
      detailList: {}
    }
  },
  created() {
+    this.id = this.$route.params.id // 详情列表
    // 获取发票详情信息
    this.fetchTicketDetail()
  },
  methods: {
    fetchTicketDetail() {
-      getTicketDetail().then(res => {
+      payDetail().then((res) => {
-        if (res.code === 0) {
+        if (res.data === 0) {
          this.detailList = res.data
        }
      })

--- a/src/modules/payment/views/List.vue
+++ b/src/modules/payment/views/List.vue
 <template>
  <app-card>
    <app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange">
+      <!-- 申请状态 -->
+      <template v-slot:status-select="{ params }">
+        <el-select v-model="params.status" placeholder="申请状态" filterable remote>
+          <el-option v-for="(item, index) in applyStatusList" :value="item.label" :key="index" :label="item.label">
+            <el-checkbox>{{ item.label }}</el-checkbox>
+          </el-option>
+        </el-select>
+      </template>
+      <!-- 费用类型 -->
+      <template v-slot:expense-select="{ params }">
+        <el-select v-model="params.expense" placeholder="费用类型" filterable remote :remote-method="getCondition">
+          <el-option v-for="(item, index) in expenseList" :key="index" :label="item.label" :value="item.value">
+            <el-checkbox>{{ item.label }}</el-checkbox>
+          </el-option>
+        </el-select>
+      </template>
+      <!-- 发票状态 -->
+      <template v-slot:invoice-select="{ params }">
+        <el-select v-model="params.invoice" placeholder="发票状态" filterable remote>
+          <el-option v-for="(item, index) in invoiceList" :key="index" :label="item.label" :value="item.value">
+            <el-checkbox>{{ item.label }}</el-checkbox>
+          </el-option>
+        </el-select>
+      </template>
+      <!-- 允许开具发票 -->
+      <template v-slot:ticket_type="{ params }">
+        <el-radio-group v-model="params.people_type">
+          <el-radio :label="1">开启</el-radio>
+          <el-radio :label="2">关闭</el-radio>
+        </el-radio-group>
+      </template>
+      <!-- 日期 -->
+      <template v-slot:firstDate="{ params }">
+        <el-date-picker
+          v-model="params.firstDate"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        >
+        </el-date-picker>
+      </template>
+      <template v-slot:lastDate="{ params }">
+        <el-date-picker
+          v-model="params.lastDate"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          size="small"
+          style="width: 360px"
+        >
+        </el-date-picker>
+      </template>
+      <template #header-aside>
+        <!-- <el-button @click="dialogVisible = true">表头</el-button> -->
+        <!-- <el-button @click="moreSelectVisible = true">更多筛选</el-button> -->
+      </template>
      <!-- 状态 -->
      <template v-slot:status="{ row }">
-        <el-switch v-model="row.status" :active-value="1" :inactive-value="0"></el-switch>
+        <el-switch v-model="row.status" :active-value="1" :inactive-value="0" @change="handleStatus(row)"></el-switch>
      </template>
      <!-- 操作 -->
-      <template #filter-date="{ params }">
-        <el-date-picker v-model="params.date"></el-date-picker>
-      </template>
      <template v-slot:table-x="{ row }">
        <router-link :to="{ name: 'paymentView', params: { id: row.id } }">
-          <el-button type="text">查看</el-button>
+          <el-button>查看</el-button>
        </router-link>
-        <el-button type="text">作废发票</el-button>
+        <el-dropdown split-button type="primary" size="small">
+          发票
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item @click.native="ticketVisible = true">开具发票</el-dropdown-item>
+            <el-dropdown-item @click.native="disabledTicketVisible = true">作废发票</el-dropdown-item>
+            <el-dropdown-item @click.native="codeVisible = true">发票二维码</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+        <el-button @click="backTicket(row)">退费</el-button>
+      </template>
+      <template #footer>
+        <span>已选择{{multipleSelection.length}}条</span>
+        <el-button @click="exportSelect" style="margin-left:40px">导出</el-button>
      </template>
    </app-list>
+    <!-- 开具发票 -->
+    <el-dialog title="开具发票" :visible.sync="ticketVisible" width="900px" append-to-body :destroy-on-close="true">
+      <TicketForm @ticketVisible="ticketVisible = false" @createTicket="handleCreateTicket" />
+    </el-dialog>
+    <!-- 更多筛选 -->
+    <!-- <el-dialog title="更多筛选" :visible.sync="moreSelectVisible" width="900px" append-to-body :destroy-on-close="true">
+      <MoreSelect @moreSelectVisible="moreSelectVisible = false" @moreSelect="handleMoreSelect" />
+    </el-dialog> -->
+    <!-- 表头筛选 -->
+    <!-- <TableHeaderSelect :visible.sync="dialogVisible" @changeStatus="handleListStatus"/> -->
+    <!-- 开票二维码 -->
+    <ShareQrcode :visible.sync="codeVisible" />
+    <!-- 作废弹框 -->
+    <el-dialog
+  title="提示"
+  :visible.sync="disabledTicketVisible"
+  width="30%">
+  <span>确定要作废此发票吗？作废后不可恢复</span>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="disabledTicketVisible = false">取 消</el-button>
+    <el-button type="primary" @click="confirm">确 定</el-button>
+  </span>
+</el-dialog>
  </app-card>
 </template>
 <script>
 // 组件
 import AppList from '@/components/base/AppList.vue'
 import AppCard from '@/components/base/AppCard.vue'
+// import TableHeaderSelect from '../components/TableHeaderSelect.vue'
+// import MoreSelect from '../components/MoreSelect.vue'
+import TicketForm from '../components/TicketForm.vue'
+import ShareQrcode from '../components/ShareQrcode.vue'
 // 接口
-// import { getGoodsList } from '../api'
+import { getCondition, getPayList } from '../api'
+// import { getPayList, getProjectList, allowCreate, cancelTicket, drawBack, createNewTicket, payDetail, getChannelList, getExpenseList } from '../api'
+// import XLSX from 'xlsx'
+// import { funDownload } from '@/utils/util'
 export default {
-  components: { AppCard, AppList },
+  components: { AppCard, AppList, TicketForm, ShareQrcode },
  data() {
    return {
-      shareDialogVisible: false,
+      conditionList: {}, // 筛选条件列表
-      shareUrl: '',
+      disabledTicketVisible: false, // 发票状态弹框
-      toticket_type: 2,
+      // 申请状态
-      dialogVisible: false,
+      applyStatusList: [
-      multipleSelection: []
+        { label: '支付待确认', value: '0' },
+        { label: '部分到账', value: '1' },
+        { label: '足额支付待确认', value: '2' },
+        { label: '足额支付', value: '2' }
+      ],
+      // 费用类型
+      expenseList: [],
+      // 发票状态
+      invoiceList: [
+        { label: '已开票', value: '0' },
+        { label: '未开票', value: '1' },
+        { label: '开票中', value: '2' },
+        { label: '已作废', value: '3' },
+        { label: '开票失败', value: '4' },
+        { label: '不可开票', value: '5' }
+      ],
+      ticketVisible: false, // 开具发票
+      // dialogVisible: false, // 表头弹框
+      // moreSelectVisible: false, // 更多筛选弹框
+      codeVisible: false, // 发票二维码
+      multipleSelection: [],
+      project_id: [], // 项目
+      channelList: [], // 渠道
+      payDetailList: {}, // 支付详情列表
+      invoiceTypeList: [ // 发票类型
+        { label: '普通发票（纸质）', value: '0' },
+        { label: '普通发票（电子）', value: '1' },
+        { label: '专用发票（纸质）', value: '2' }
+      ]
    }
  },
  computed: {
    // 列表配置
    tableOptions() {
      return {
-        // remote: {
+        remote: {
-        //   httpRequest: getGoodsList,
+          httpRequest: getPayList, // 获取订单列表
-        //   params: { shop_id: this.shopId, spu_id: '', spu_name: '', group_id: '', price_min: '', price_max: '' },
+          params: {},
-        //   beforeRequest: this.beforeRequest
+          beforeRequest: this.beforeRequest
-        // },
+        },
        filters: [
-          {
+          // 项目
-            prop: 'date',
-            slots: 'filter-date'
-          },
          {
            type: 'select',
-            prop: 'group_id',
+            prop: 'project',
-            options: this.groupList,
+            options: this.projectList,
-            labelKey: 'group_name',
+            labelKey: 'name',
-            valueKey: 'group_id',
+            valueKey: 'project_id',
            placeholder: '项目'
          },
+          // 客户姓名
          {
            type: 'input',
            prop: 'spu_name',
            placeholder: '客户姓名'
          },
+          // 渠道
          {
            type: 'select',
-            prop: 'group_id',
+            prop: 'channel',
-            labelKey: 'group_name',
+            options: this.channel_id,
-            valueKey: 'group_id',
+            labelKey: 'channel_id',
-            placeholder: '渠道',
+            valueKey: 'title',
-            options: [
+            placeholder: ' 渠道',
-              { label: '全部', value: '0' },
+            filterable: true,
-              { label: '开启', value: '1' },
+            remote: true,
-              { label: '关闭', value: '2' }
+            'remote-method': this.fetchCondition
-            ]
          },
+          // 申请状态
          {
-            type: 'select',
+            prop: 'status',
-            prop: 'group_id',
+            slots: 'status-select'
-            labelKey: 'group_name',
-            valueKey: 'group_id',
-            placeholder: '申请状态',
-            options: [
-              { label: '全部', value: '0' },
-              { label: '开启', value: '1' },
-              { label: '关闭', value: '2' }
-            ]
          },
+          // 费用类型
          {
-            type: 'select',
+            prop: 'expense',
-            prop: 'group_id',
+            slots: 'expense-select'
-            labelKey: 'group_name',
-            valueKey: 'group_id',
-            placeholder: '费用类型',
-            options: [
-              { label: '全部', value: '0' },
-              { label: '开启', value: '1' },
-              { label: '关闭', value: '2' }
-            ]
          },
+          // 发票状态
          {
-            type: 'select',
+            prop: 'invoice',
-            prop: 'group_id',
+            slots: 'invoice-select'
-            labelKey: 'group_name',
-            valueKey: 'group_id',
-            placeholder: '发票状态',
-            options: [
-              { label: '全部', value: '0' },
-              { label: '开启', value: '1' },
-              { label: '关闭', value: '2' }
-            ]
          }
        ],
-        columns: [
+        moreFilters: [
-          { type: 'selection', minWidth: '50px', fixed: 'left' },
-          { label: '客户名称', prop: 'date', minWidth: 80 },
-          { label: '项目', prop: 'name', align: 'center', minWidth: 80 },
-          { label: '支付状态', prop: 'name', align: 'center', minWidth: 80 },
-          { label: '首次缴费时间', prop: 'address', align: 'center', minWidth: 80 },
-          { label: '末次缴费时间', prop: 'name', align: 'center', minWidth: 80 },
-          { label: '应缴金额', slots: 'status', align: 'center', minWidth: 100 },
-          { label: '实缴金额', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '手续费', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '到账金额', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '代缴金额', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '跟进人', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '渠道', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '交易流水号', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '服务费规则', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '服务费比例', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '不含税销售金额', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '渠道代理提基数', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '代理服务费', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '代理服务费（不含税金额）', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '渠道税率', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '户名', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '账号', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '开户行', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '所属班次', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '开学时间', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '学制期限', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '实缴金额', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '实缴金额', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '实缴金额', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '实缴金额', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '实缴金额', slots: 'table-x', align: 'center', minWidth: 300 },
-          { label: '实缴金额', slots: 'table-x', align: 'center', minWidth: 300 }
-        ],
-        data: [
          {
-            id: '1',
+            label: '跟进人',
-            date: '2016-05-01',
+            type: 'select',
-            name: '王小虎',
+            placeholder: '跟进人',
-            address: '上海市普陀区金沙江路 1519 弄'
+            options: this.followList,
+            labelKey: 'project_name',
+            valueKey: 'project_id',
+            filterable: true,
+            remote: true,
+            'remote-method': this.fetchFollowListList
          },
          {
-            id: '2',
+            label: '发票类型',
-            date: '2016-05-01',
+            type: 'select',
-            name: '王小虎',
+            placeholder: '发票类型',
-            address: '上海市普陀区金沙江路 1519 弄'
+            options: this.invoiceTypeList,
+            labelKey: 'invoice_name',
+            valueKey: 'invoice_id'
          },
          {
-            id: '3',
+            label: '允许开具发票',
-            date: '2016-05-01',
+            prop: 'ticket_type',
-            name: '王小虎',
+            slots: 'ticket_type'
-            address: '上海市普陀区金沙江路 1519 弄'
          },
          {
-            id: '4',
+            label: '首次缴费时间',
-            date: '2016-05-03',
+            prop: 'firstDate',
-            name: '王小虎',
+            slots: 'firstDate'
-            address: '上海市普陀区金沙江路 1519 弄'
+          },
+          {
+            label: '末次缴费时间',
+            prop: 'lastDate',
+            slots: 'lastDate'
          }
+        ],
+        columns: [
+          { type: 'selection', minWidth: '50px', fixed: 'left' },
+          { label: '客户名称', prop: 'date', minWidth: 80 },
+          { label: '项目', prop: 'name', align: 'center', minWidth: 80 },
+          { label: '支付状态', prop: 'name', align: 'center', minWidth: 80 },
+          { label: '首次缴费时间', align: 'center', minWidth: 80 },
+          { label: '末次缴费时间', align: 'center', minWidth: 80 },
+          { label: '应缴金额', align: 'center', minWidth: 80 },
+          { label: '实缴金额', align: 'center', minWidth: 80 },
+          { label: '手续费', align: 'center', minWidth: 80 },
+          { label: '到账金额', align: 'center', minWidth: 80 },
+          { label: '代缴金额', align: 'center', minWidth: 80 },
+          { label: '跟进人', align: 'center', minWidth: 80 },
+          { label: '渠道', align: 'center', minWidth: 80 },
+          { label: '交易流水号', align: 'center', minWidth: 80 },
+          { label: '服务费规则', align: 'center', minWidth: 80 },
+          { label: '服务费比例', align: 'center', minWidth: 80 },
+          { label: '不含税销售金额', align: 'center', minWidth: 80 },
+          { label: '渠道代理提基数', align: 'center', minWidth: 80 },
+          { label: '代理服务费', align: 'center', minWidth: 80 },
+          { label: '代理服务费（不含税金额）', align: 'center', minWidth: 80 },
+          { label: '渠道税率', align: 'center', minWidth: 80 },
+          { label: '户名', align: 'center', minWidth: 80 },
+          { label: '账号', align: 'center', minWidth: 80 },
+          { label: '开户行', align: 'center', minWidth: 80 },
+          { label: '所属班次', align: 'center', minWidth: 80 },
+          { label: '开学时间', align: 'center', minWidth: 80 },
+          { label: '学制期限', align: 'center', minWidth: 80 },
+          { label: '客户编号', align: 'center', minWidth: 80 },
+          { label: '退费状态', prop: 'backStatus', align: 'center', minWidth: 80 },
+          { label: '发票状态', align: 'center', minWidth: 80 },
+          { label: '发票申请日期', align: 'center', minWidth: 80 },
+          { label: '允许开具发票', slots: 'status', align: 'center', minWidth: 80 },
+          { label: '操作', slots: 'table-x', align: 'center', minWidth: 300 }
        ]
      }
+    },
+    // 项目列表
+    projectList() {
+      return this.conditionList.project_id || []
    }
  },
+  created() {
+    this.fetchCondition() // 获取过滤条件
+    // this.getTableTitle() // 获取表头数据
+    // this.getpPayDetail() // 获取支付详情信息
+  },
  methods: {
-    beforeRequest(params, isReset) {
+    fetchCondition() {
-      // 重置
+      getCondition().then((res) => {
-      if (isReset) {
+        this.conditionList = res.data
-        params.price_min = ''
+        console.log(this.conditionList)
-        params.price_max = ''
+      })
-      }
-      params.status = this.activeName === '0' ? '' : this.activeName
-      params.price_zone = `${params.price_min || ''},${params.price_max || ''}`
-      return params
-    },
-    // 选择
-    handleSelectionChange(value) {
-      this.multipleSelection = value
    }
+    // handleListStatus() {
+    //   this.getPayList() // 刷新列表
+    // },
+    // handleSelectionChange(val) {
+    //   this.multipleSelection = val
+    // },
+    // // 表头筛选
+    // tableHeader() {},
+    // // 更多筛选
+    // moreSelect() {},
+    // // 开具发票
+    // handleCreateTicket(val) {
+    //   createNewTicket(val).then(res => {
+    //     if (res.code === 0) {
+    //       this.$message.success('开票成功')
+    //       this.ticketVisible = false
+    //       this.getPayList() // 刷新订单列表
+    //     }
+    //   })
+    // },
+    // // 是否允许开具发票
+    // handleStatus(row) {
+    //   allowCreate(row.id, row.status).then(res => {
+    //     if (res.code === 0) {
+    //       this.$message.success('更新状态成功')
+    //     } else {
+    //       this.$message.error('更新状态失败')
+    //     }
+    //   })
+    // },
+    // // 确认作废
+    // confirm(row) {
+    //   cancelTicket(row.id).then(res => {
+    //     if (res.code === 0) {
+    //       this.disabledTicketVisible = false
+    //       this.getPayList() // 更新订单列表
+    //       this.$message.success('发票已作废')
+    //     } else {
+    //       this.$message.error('该发票无作废失败')
+    //     }
+    //   })
+    // },
+    // // 退费
+    // backTicket(row) {
+    //   // 改变退费状态
+    //   drawBack(row.id).then(res => {
+    //     if (res.code === 0) {
+    //       this.getPayList() // 刷新订单列表
+    //       this.$message.success('退费成功')
+    //     } else {
+    //       this.$message.error('退费失败')
+    //     }
+    //   })
+    // },
+    // // 支付详情
+    // getPayDetail(row) {
+    //   payDetail(row.id).then(res => {
+    //     if (res.code === 0) {
+    //       this.payDetailList = res.data // 支付详情列表
+    //     }
+    //   })
+    // },
+    // // 获取表头
+    // // fetchTableTitle() {
+    // //   getTableTitle().then(res => {
+    // //     if (res.code === 0) {
+    // //       this.tableTitle = res.data.tableTitle
+    // //     }
+    // //   })
+    // // },
+    // // 获取项目下拉框数据
+    // fetchGroupList() {
+    //   getProjectList().then(res => {
+    //     if (res.code === 0) {
+    //       const dataList = res.data
+    //       this.groupList = dataList.map(item => {
+    //         return item.title
+    //       })
+    //     }
+    //   })
+    // },
+    // // 渠道
+    // fetchChannelList() {
+    //   getChannelList().then(res => {
+    //     if (res.code === 0) {
+    //       const dataList = res.data
+    //       this.channelList = dataList.map(item => {
+    //         return item.title
+    //       })
+    //     }
+    //   })
+    // },
+    // // 申请状态
+    // fetchApplyStatusList() {
+    //   getApplyStatusList().then(res => {
+    //     if (res.code === 0) {
+    //       const dataList = res.data
+    //       this.applyStatusList = dataList.map(item => {
+    //         return item.title
+    //       })
+    //     }
+    //   })
+    // },
+    // 费用类型
+    // fetchExpenseList() {
+    //   getExpenseList().then(res => {
+    //     if (res.code === 0) {
+    //       const dataList = res.data
+    //       this.expenseList = dataList.map(item => {
+    //         return item.title
+    //       })
+    //     }
+    //   })
+    // },
+    // // 导出
+    // exportSelect() {
+    //   console.log('dsfsf')
+    //   const list = this.tableOptions.columns.filter(item => {
+    //     return item.prop && item.prop !== 'head_img'
+    //   })
+    //   const headList = list.map(item => item.label)
+    //   const propList = list.map(item => item.prop)
+    //   const excelList = []
+    //   excelList.push(headList, propList)
+    //   const ws = XLSX.utils.aoa_to_sheet(excelList)
+    //   ws['!cols'] = [
+    //     { wpx: 120 },
+    //     { wpx: 120 },
+    //     { wpx: 160 },
+    //     { wpx: 180 },
+    //     { wpx: 120 },
+    //     { wpx: 80 },
+    //     { wpx: 200 },
+    //     { wpx: 120 },
+    //     { wpx: 120 }
+    //   ]
+    //   const wb = XLSX.utils.book_new()
+    //   wb.SheetNames.push('Worksheet')
+    //   wb.Sheets.Worksheet = ws
+    //   const wopts = { bookType: 'xlsx', bookSST: false, type: 'array' }
+    //   const wbout = XLSX.write(wb, wopts)
+    //   const url = URL.createObjectURL(new window.Blob([wbout], { type: 'application/octet-stream' }))
+    //   funDownload(url, `订单列表_${Date.now()}.xlsx`)
+    // }
  }
 }
 </script>
--- a/src/modules/payment/views/PayDetail.vue
+++ b/src/modules/payment/views/PayDetail.vue
+<template>
+<el-card>
+  <table border="1" width="1200px" cellspacing="0">
+    <tr>
+      <th>支付人姓名</th>
+      <td>额度无绯闻绯闻</td>
+      <th>费用类型</th>
+      <td>发呆发呆舒服</td>
+      <th>支付金额</th>
+      <td>发v郭德纲vb</td>
+      <th>支付状态</th>
+      <td>发啊发恶风</td>
+    </tr>
+    <tr>
+      <th>项目</th>
+      <td>书法色法俄吧v</td>
+      <th>销售</th>
+      <td>反对党撒发色吧</td>
+      <th>渠道</th>
+      <td colspan="3">都是十分热啊</td>
+    </tr>
+    <tr>
+      <th>支付方式</th>
+      <td>吧官方办法但是不管v</td>
+      <th>其他支付方式</th>
+      <td>v地方v地方v </td>
+      <th>支付时间</th>
+      <td colspan="3">电饭煲v地方吧</td>
+    </tr>
+    <tr>
+      <th>到账金额</th>
+      <td>发电站v博格达峰准备v</td>
+      <th>手续费</th>
+      <td>吧成功v不分手吧</td>
+      <th>到账时间</th>
+      <td colspan="3">从v小板凳上早班v</td>
+    </tr>
+    <tr>
+      <th>支付凭证</th>
+      <td colspan="7">吧非常v表达方式吧 </td>
+    </tr>
+    <tr>
+      <th>到账凭证</th>
+      <td colspan="7">v的风格vx</td>
+    </tr>
+    <tr>
+      <th>备注</th>
+      <td colspan="7">饭店隔壁v额的烦不烦</td>
+    </tr>
+    <tr>
+      <th>创建时间</th>
+      <td colspan="3">奋斗让vv个多v</td>
+      <th>更新时间</th>
+      <td colspan="3">百分之百政府公布 </td>
+      </tr>
+  </table>
+</el-card>
+</template>
+<script>
+import { payDetail } from '../api'
+export default {
+  data() {
+    return {
+    }
+  },
+  mounted() {
+    this.getPayDetail()
+  },
+  methods: {
+    getPayDetail() {
+      payDetail().then(res => {
+      })
+    }
+  }
+}
+</script>
+<style>
+</style>
\ No newline at end of file
--- a/src/utils/util.js
+++ b/src/utils/util.js
+/**
+ * 文件下载
+ * @param {string} fileUrl 文件下载地址
+ * @param {string} fileName 文件名
+ * @returns {null}
+ */
+export function funDownload(fileUrl, fileName) {
+  // console.log(fileUrl)
+  const elink = document.createElement('a')// 创建一个a标签
+  elink.download = fileName// 设置a标签的下载属性
+  elink.style.display = 'none'// 将a标签设置为隐藏
+  elink.href = fileUrl// 把之前处理好的地址赋给a标签的href
+  document.body.appendChild(elink)// 将a标签添加到body中
+  elink.click()// 执行a标签的点击方法
+  // URL.revokeObjectURL(elink.href) // 下载完成释放URL 对象
+  document.body.removeChild(elink)// 移除a标签
+}
+/**
+ * 分割字符串，取得尾部
+ * @param {string} str 字符串
+ * @param {string} split 分割符
+ * @returns {string}
+ */
+export function splitStrLast(str, split) {
+  const fileNameArr = str.split(split)
+  const last = fileNameArr[fileNameArr.length - 1]
+  return last
+}