From fdcd6f25f6b2f9fca09f587096f2b31485ad1b42 Mon Sep 17 00:00:00 2001 From: lq <13849061902@qq.com> Date: Sat, 6 Jul 2024 17:03:14 +0800 Subject: [PATCH] add code --- package-lock.json | 310 +++++++++++ package.json | 3 + src/App copy 2.vue | 1156 ++++++++++++++++++++++++++++++++++++++++++ src/App copy.vue | 1050 ++++++++++++++++++++++++++++++++++++++ src/App.vue | 435 +++++++++++++--- src/assets/style.css | 22 +- 6 files changed, 2906 insertions(+), 70 deletions(-) create mode 100644 src/App copy 2.vue create mode 100644 src/App copy.vue diff --git a/package-lock.json b/package-lock.json index 020c8db..a0752d9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,8 +11,11 @@ "@hufe921/canvas-editor": "^0.9.81", "axios": "^1.7.2", "element-plus": "^2.7.5", + "qrcode": "^1.5.3", + "qrcodejs2-fix": "^0.0.1", "vue": "^3.4.21", "vue-axios": "^3.5.2", + "vue-qrcode": "^2.2.2", "vue-router": "^4.3.3", "vuedraggable": "^4.1.0" }, @@ -884,6 +887,28 @@ } } }, + "node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "engines": { + "node": ">=8" + } + }, + "node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, "node_modules/async-validator": { "version": "4.2.5", "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz", @@ -904,6 +929,40 @@ "proxy-from-env": "^1.1.0" } }, + "node_modules/camelcase": { + "version": "5.3.1", + "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-5.3.1.tgz", + "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", + "engines": { + "node": ">=6" + } + }, + "node_modules/cliui": { + "version": "6.0.0", + "resolved": "https://registry.npmmirror.com/cliui/-/cliui-6.0.0.tgz", + "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==", + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.0", + "wrap-ansi": "^6.2.0" + } + }, + "node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, "node_modules/combined-stream": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", @@ -925,6 +984,14 @@ "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.11.tgz", "integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==" }, + "node_modules/decamelize": { + "version": "1.2.0", + "resolved": "https://registry.npmmirror.com/decamelize/-/decamelize-1.2.0.tgz", + "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/delayed-stream": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", @@ -933,6 +1000,11 @@ "node": ">=0.4.0" } }, + "node_modules/dijkstrajs": { + "version": "1.0.3", + "resolved": "https://registry.npmmirror.com/dijkstrajs/-/dijkstrajs-1.0.3.tgz", + "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==" + }, "node_modules/element-plus": { "version": "2.7.5", "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.7.5.tgz", @@ -958,6 +1030,16 @@ "vue": "^3.2.0" } }, + "node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" + }, + "node_modules/encode-utf8": { + "version": "1.0.3", + "resolved": "https://registry.npmmirror.com/encode-utf8/-/encode-utf8-1.0.3.tgz", + "integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw==" + }, "node_modules/entities": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", @@ -1017,6 +1099,18 @@ "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==" }, + "node_modules/find-up": { + "version": "4.1.0", + "resolved": "https://registry.npmmirror.com/find-up/-/find-up-4.1.0.tgz", + "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", + "dependencies": { + "locate-path": "^5.0.0", + "path-exists": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/follow-redirects": { "version": "1.15.6", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", @@ -1063,6 +1157,33 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, + "node_modules/get-caller-file": { + "version": "2.0.5", + "resolved": "https://registry.npmmirror.com/get-caller-file/-/get-caller-file-2.0.5.tgz", + "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", + "engines": { + "node": "6.* || 8.* || >= 10.*" + } + }, + "node_modules/is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "engines": { + "node": ">=8" + } + }, + "node_modules/locate-path": { + "version": "5.0.0", + "resolved": "https://registry.npmmirror.com/locate-path/-/locate-path-5.0.0.tgz", + "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", + "dependencies": { + "p-locate": "^4.1.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", @@ -1137,11 +1258,60 @@ "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz", "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==" }, + "node_modules/p-limit": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/p-limit/-/p-limit-2.3.0.tgz", + "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", + "dependencies": { + "p-try": "^2.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/p-locate": { + "version": "4.1.0", + "resolved": "https://registry.npmmirror.com/p-locate/-/p-locate-4.1.0.tgz", + "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", + "dependencies": { + "p-limit": "^2.2.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/p-try": { + "version": "2.2.0", + "resolved": "https://registry.npmmirror.com/p-try/-/p-try-2.2.0.tgz", + "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", + "engines": { + "node": ">=6" + } + }, + "node_modules/path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npmmirror.com/path-exists/-/path-exists-4.0.0.tgz", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", + "engines": { + "node": ">=8" + } + }, "node_modules/picocolors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==" }, + "node_modules/pngjs": { + "version": "5.0.0", + "resolved": "https://registry.npmmirror.com/pngjs/-/pngjs-5.0.0.tgz", + "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==", + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/postcss": { "version": "8.4.38", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", @@ -1174,6 +1344,41 @@ "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" }, + "node_modules/qrcode": { + "version": "1.5.3", + "resolved": "https://registry.npmmirror.com/qrcode/-/qrcode-1.5.3.tgz", + "integrity": "sha512-puyri6ApkEHYiVl4CFzo1tDkAZ+ATcnbJrJ6RiBM1Fhctdn/ix9MTE3hRph33omisEbC/2fcfemsseiKgBPKZg==", + "dependencies": { + "dijkstrajs": "^1.0.1", + "encode-utf8": "^1.0.3", + "pngjs": "^5.0.0", + "yargs": "^15.3.1" + }, + "bin": { + "qrcode": "bin/qrcode" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/qrcodejs2-fix": { + "version": "0.0.1", + "resolved": "https://registry.npmmirror.com/qrcodejs2-fix/-/qrcodejs2-fix-0.0.1.tgz", + "integrity": "sha512-1R6jB87k1PUwjX65hh24FftDjrghPvryYfsajV3chCp//dQb8QUeL446DVLj2SIeotP8ro9rSYri0wOp7O+7Hg==" + }, + "node_modules/require-directory": { + "version": "2.1.1", + "resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz", + "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/require-main-filename": { + "version": "2.0.0", + "resolved": "https://registry.npmmirror.com/require-main-filename/-/require-main-filename-2.0.0.tgz", + "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==" + }, "node_modules/rollup": { "version": "4.18.0", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz", @@ -1209,6 +1414,11 @@ "fsevents": "~2.3.2" } }, + "node_modules/set-blocking": { + "version": "2.0.0", + "resolved": "https://registry.npmmirror.com/set-blocking/-/set-blocking-2.0.0.tgz", + "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==" + }, "node_modules/sortablejs": { "version": "1.14.0", "resolved": "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.14.0.tgz", @@ -1222,6 +1432,35 @@ "node": ">=0.10.0" } }, + "node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/tslib": { + "version": "2.6.3", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.6.3.tgz", + "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==" + }, "node_modules/vite": { "version": "5.2.13", "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.13.tgz", @@ -1306,6 +1545,21 @@ "vue": "^3.0.0 || ^2.0.0" } }, + "node_modules/vue-qrcode": { + "version": "2.2.2", + "resolved": "https://registry.npmmirror.com/vue-qrcode/-/vue-qrcode-2.2.2.tgz", + "integrity": "sha512-SbrXq/mSb1g2tbDyXPe9gy9KiMYsvxWKRErlpij1BqiFoHwQckheZV63CTw6yRLLUVG2RXAVlX+APkpdCK7SQQ==", + "dependencies": { + "tslib": "^2.6.2" + }, + "funding": { + "url": "https://opencollective.com/rxts" + }, + "peerDependencies": { + "qrcode": "^1.0.0", + "vue": "^2.7.0 || ^3.0.0" + } + }, "node_modules/vue-router": { "version": "4.3.3", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.3.tgz", @@ -1330,6 +1584,62 @@ "peerDependencies": { "vue": "^3.0.1" } + }, + "node_modules/which-module": { + "version": "2.0.1", + "resolved": "https://registry.npmmirror.com/which-module/-/which-module-2.0.1.tgz", + "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==" + }, + "node_modules/wrap-ansi": { + "version": "6.2.0", + "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz", + "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==", + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/y18n": { + "version": "4.0.3", + "resolved": "https://registry.npmmirror.com/y18n/-/y18n-4.0.3.tgz", + "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==" + }, + "node_modules/yargs": { + "version": "15.4.1", + "resolved": "https://registry.npmmirror.com/yargs/-/yargs-15.4.1.tgz", + "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==", + "dependencies": { + "cliui": "^6.0.0", + "decamelize": "^1.2.0", + "find-up": "^4.1.0", + "get-caller-file": "^2.0.1", + "require-directory": "^2.1.1", + "require-main-filename": "^2.0.0", + "set-blocking": "^2.0.0", + "string-width": "^4.2.0", + "which-module": "^2.0.0", + "y18n": "^4.0.0", + "yargs-parser": "^18.1.2" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/yargs-parser": { + "version": "18.1.3", + "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-18.1.3.tgz", + "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==", + "dependencies": { + "camelcase": "^5.0.0", + "decamelize": "^1.2.0" + }, + "engines": { + "node": ">=6" + } } } } diff --git a/package.json b/package.json index 50542e5..5bc9cb5 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,11 @@ "@hufe921/canvas-editor": "^0.9.81", "axios": "^1.7.2", "element-plus": "^2.7.5", + "qrcode": "^1.5.3", + "qrcodejs2-fix": "^0.0.1", "vue": "^3.4.21", "vue-axios": "^3.5.2", + "vue-qrcode": "^2.2.2", "vue-router": "^4.3.3", "vuedraggable": "^4.1.0" }, diff --git a/src/App copy 2.vue b/src/App copy 2.vue new file mode 100644 index 0000000..eda0314 --- /dev/null +++ b/src/App copy 2.vue @@ -0,0 +1,1156 @@ + + + + + diff --git a/src/App copy.vue b/src/App copy.vue new file mode 100644 index 0000000..fbc6f14 --- /dev/null +++ b/src/App copy.vue @@ -0,0 +1,1050 @@ + + + + + diff --git a/src/App.vue b/src/App.vue index ecb1272..e312c67 100644 --- a/src/App.vue +++ b/src/App.vue @@ -7,9 +7,10 @@ import TheWelcome from './components/TheWelcome.vue'
- 文档数据 - - 保存样式 + 保存配置 + 预览 + 切换配置 +
@@ -234,9 +235,9 @@ import TheWelcome from './components/TheWelcome.vue'
-
+
- +
@@ -336,12 +337,12 @@ import TheWelcome from './components/TheWelcome.vue'
-
+
-
+
@@ -418,15 +419,6 @@ import TheWelcome from './components/TheWelcome.vue'
- - - - - - - - -
订单信息{{ index }}:
@@ -441,30 +433,44 @@ import TheWelcome from './components/TheWelcome.vue'
- -
-
拖拽此列调整位置
- - - - +
+ + +
+ +
+ + + +
+ +
+
+ + + + + + + + 单击即复制成功 + +
+ + {{ '{' + searchField[key] + '}' }} + +
@@ -489,6 +495,8 @@ import Editor, { } from '@hufe921/canvas-editor' import axios from 'axios' import draggable from "vuedraggable" +import QRCode from 'qrcodejs2-fix' +import {ref} from 'vue' export default { data() { return { @@ -508,14 +516,47 @@ export default { orderList: [], showObj: {}, config: {}, - tableHeight:42, - tableWidth:556 + tableHeight: 42, + tableWidth: 556, + aRow: {}, + searchNameField:{}, + searchList:{}, + searchField:{}, + qrCodeValue:'dfdfddgg', + myDiv: null } }, mounted() { this.login() }, methods: { + handleGenerate(idName, name) { + // 采集二维码：路径 + const url = 'https://www.baihand.com?order_id=' + name//`${getIPAddress}?companyId=80&saleId=${name}`; + // 获取二维码码 div 上的 id + const qrCodeElement = document.getElementById(idName); + if (qrCodeElement) { + qrCodeElement.innerHTML = ''; + new QRCode(qrCodeElement, { + text: url || '', + width: 100, // 二维码宽度 + height: 100, // 二维码高度 + }); + } + }, + copy(value) { + const textArea = document.createElement('textarea'); + textArea.value = value; + document.body.appendChild(textArea); + textArea.select(); + document.execCommand('copy'); + textArea.remove(); + console.log(value); + }, + getShow() { + this.updateStatus = true + this.init([]) + }, onStart() { console.log("开始拖拽") }, @@ -530,17 +571,25 @@ export default { return false } this.updateStatus = true - this.updateDoc(this.orderList) + //this.updateDoc(this.orderList) + this.init([]) }, updateWord() { const ccc = this.instance.command.getValue() this.updateStatus = true //console.log(this.orderList) - this.updateDoc(this.orderList) + //this.updateDoc(this.orderList) + this.init([]) + }, + changeConfig() { + this.updateStatus = false + this.init([]) }, login() { + //https://test.yqt.com/ let api = '/api/Administrator/Public/loginJson' + let param = { username: '15238311624', userpwd: '1624' } let headers = { 'Content-Type': 'application/x-www-form-urlencoded' @@ -557,10 +606,12 @@ export default { let fieldObj = {} let nameField = {} let showObj = {} + let aRow = {} for (let i = 0; i < fieldArr.length; i++) { let key = fieldArr[i].field fieldObj[key] = fieldArr[i].name showObj[key] = true + aRow[key] = false nameField[fieldArr[i].name] = key } @@ -574,16 +625,23 @@ export default { getApiData() { let api = '/api/Administrator/InquiryOrder/getOrderInfo?order_id=E2024060509560254698592' let api2 = '/api/Administrator/OrderFieldStyle/getUserConfig?type=1' + let api3 ='/api/Administrator/InquirySearchConfig/getUserConfig' const request1 = axios.get(api) - const request2 = axios.get(api2) - axios.all([request1, request2]).then(axios.spread((response1, response2) => { + //const request2 = axios.get(api2) + const request3 = axios.get(api3) + axios.all([request1, request3]).then(axios.spread((response1, response3) => { //.log(response1, response2) let data = response1.data this.orderList = data.data.orderExt.productList + this.searchList = data.data.searchExt + let order_id = data.data.searchExt['order_id'] + console.log('order_id', order_id) + this.handleGenerate('imgCode', order_id) let orderData = data.data.orderExt.productList - let data2 = response2.data - - if (data2.code == 1) { + //let data2 = response2.data + let data3 = response3.data + this.orderData = orderData + /* if (data2.code == 1) { this.config = data2.data for (let key in this.showObj) { if (!this.config.hasOwnProperty(key)) { @@ -591,22 +649,37 @@ export default { } } this.sortData(data2.data) + } */ + if(data3.code == 1) { + this.searchConfig = data3.data + let searchNameField = {} + let searchField = {} + searchField['order_id'] = '订单号' + searchNameField['订单号'] = 'order_id' + for (let i = 0; i < data3.data.length; i++) { + let key = data3.data[i].name + searchNameField[key] = data3.data[i].field + searchField[data3.data[i].field] = key + } + this.searchNameField = searchNameField + this.searchField = searchField } this.updateDoc(orderData) })) }, + sortData(styleData) { let tempObj = {} - for(let i = 0; i < this.fieldArr.length; i++) { + for (let i = 0; i < this.fieldArr.length; i++) { tempObj[this.fieldArr[i].field] = this.fieldArr[i] } let tempArr = []; - for(let key in tempObj) { - if(!styleData.hasOwnProperty(key)) { + for (let key in tempObj) { + if (!styleData.hasOwnProperty(key)) { tempArr.push(tempObj[key]) } } - for(let styleKey in styleData) { + for (let styleKey in styleData) { tempArr.push(tempObj[styleKey]) } this.fieldArr = tempArr @@ -667,7 +740,7 @@ export default { let proTitle = { "minHeight": tableHeight, "height": tableHeight, "tdList": [{ 'verticalAlign': 'middle', "colspan": _this.tableCol, "rowspan": 1, "value": [{ "value": "产品名称: " + item['product_name'], "size": 16, bold: 'bolder' }] }] } trList.push(proTitle) //for (let key in _this.field) { - for(let j = 0; j < _this.fieldArr.length; j++){ + for (let j = 0; j < _this.fieldArr.length; j++) { let key = _this.fieldArr[j].field if (!_this.showObj[key]) continue @@ -761,13 +834,15 @@ export default { }, getHTMLValuea() { const ccc = this.instance.command.getValue() - console.log(ccc) + //console.log(ccc) + localStorage.setItem('word_data', JSON.stringify(ccc.data)) + //this.getTest(ccc.data.main[2].value) }, getHTMLValue() { //const aaa = this.instance.command.getHTML() //const bbb = this.instance.command.getText() - const ccc = this.instance.command.getValue() + let ccc = this.instance.command.getValue() //console.log(ccc) //console.log(this.nameField) let data = ccc.data.main[0].trList @@ -814,7 +889,7 @@ export default { for (let key in tempData) { saveData.push(tempData[key]) } - console.log(saveData) + //.log(saveData) //return false let api = '/api/Administrator/OrderFieldStyle/save' axios.post(api, saveData).then((res) => { @@ -842,27 +917,252 @@ export default { return count }, - init(showData) { - if (this.updateStatus) { - this.instance.destroy() + getImgage(ele){ + const imgElement = document.querySelector(`#${ele} img`) + const srcValue = imgElement.src + return srcValue + }, + replaceData(value) { + ///console.log('value', value) + let start = value.indexOf('{') + if(start == -1) { + return value } + let end = value.indexOf('}') + let fieldKey = value.substring(start + 1, end) + let field = this.searchNameField[fieldKey] + let newValue = this.searchList[field] + value = value.replace('{'+ fieldKey +'}', newValue) + return this.replaceData(value) + }, + fillDataBak(config) { + let code = this.getImgage('imgCode') + let result = [] + let orderData = this.orderData + let tempList = [] + let tempTrList = [] + let tableIndex = 0 + let data = JSON.parse(JSON.stringify(config)) + for (let i = 0; i < config.length; i++) { + let temp = JSON.parse(JSON.stringify(config[i])) + if (!config[i].hasOwnProperty('type')) { + if(config[i].value.indexOf('{') == -1) { + result.push(data[i]) + continue + }else{ + let value = data[i].value + /* let start = value.indexOf('{') + let end = value.indexOf('}') + let fieldKey = value.substring(start + 1, end) + let field = this.searchNameField[fieldKey] + let newValue = this.searchList[field] */ + config[i].value = this.replaceData(value)//value.replace('{'+ fieldKey +'}', newValue) + + result.push(data[i]) + continue + } + }else if(config[i].type == 'image') { + console.log('image',data[i]) + config[i].value = code + continue + } + for (let o = 0; o < orderData.length; o++) { + { + let order = JSON.parse(JSON.stringify(orderData[o])) + if (config[i].type == 'table') { + data[i].trList = [] + tableIndex = i + let trList = JSON.parse(JSON.stringify(config[i].trList)) + let list = this.packageTrList(trList, order, o) + if(list.length != 0) { + temp.trList = list + result.push(temp) + for (let index = 0; index < list.length; index++) { + let element = list[index]; + tempTrList.push(element) + } + } + }else{ + let value = temp.value + if(value.indexOf('{') == -1) { + temp.value = this.getFieldValue(value, order) + result.push(temp) + } + + } + } + } + //config[tableIndex].trList = tempTrList + } + config[tableIndex].trList = tempTrList + //config + return config + }, + fillData(config) { + let res = [] + let code = this.getImgage('imgCode') + for (let i = 0; i < config.length; i++) { + let configItem = JSON.parse(JSON.stringify(config[i])) + if(configItem.hasOwnProperty('type') && configItem['type'] == 'table') { + let trList = configItem.trList + let temTrList = { + 'colgroup': configItem.colgroup, + 'height': configItem.height, + 'type': configItem.type, + 'width': configItem.width, + 'value': configItem.value, + 'trList': [] + } + for (let j = 0; j < trList.length; j++) { + let trListItem = JSON.parse(JSON.stringify(trList[j])) + let tdList = trListItem.tdList + let title = tdList[0].value[0].value + if(title.indexOf('{') != -1) { + trListItem.tdList = [] + for (let k = 0; k < this.orderData.length; k++) { + let tempTdList = [] + let order = this.orderData[k]; + for (let l = 0; l < tdList.length; l++) { + let tdListItem = JSON.parse(JSON.stringify(tdList[l])) + let tdValue = tdListItem.value[0].value + let newValue = this.getFieldValue(tdValue, order) + let wocao = { + 'colspan': tdListItem.colspan, + 'rowspan': tdListItem.rowspan, + 'value': [ + { + 'value': newValue, + 'size': tdListItem.value[0].size + } + ] + } + tempTdList.push(wocao) + } + let tempTr = { + 'height':trListItem.height, + 'minHeight':trListItem.minHeight ? trListItem.minHeight : trListItem.height, + 'tdList':[] + } + tempTr.tdList = tempTdList + temTrList.trList.push(tempTr) + } + }else{ + temTrList.trList.push(trListItem) + continue + } + } + res.push(temTrList) + }else if(configItem.hasOwnProperty('type') && configItem['type'] == 'image'){ + configItem.value = code + res.push(configItem) + + }else{ + let value = configItem.value + configItem.value = this.replaceData(value) + res.push(configItem) + } + } + //console.log('res',res) + return res + }, + packageTrList(trList, orderData, o) { + let data = trList + let falg = false + let deleteIndexArr = [] + for (let i = 0; i < data.length; i++) { + let tdList = data[i].tdList + for (let j = 0; j < tdList.length; j++) { + if(tdList[j].value.length > 0) { + let value = tdList[j].value[0].value + let start = value.indexOf('{') + if(start == -1 && o != 0) { + falg = true + deleteIndexArr.push(i) + //console.log(deleteIndexArr, data[i]) - this.instance = new Editor( - document.querySelector('.editor'), - { + } + let newValue = this.getFieldValue(value, orderData) + tdList[j].value[0].value = newValue + } + + } + } + deleteIndexArr = [...new Set(deleteIndexArr)] + if(falg) { + //console.log(deleteIndexArr) + for (let index = 0; index < deleteIndexArr.length; index++) { + data.splice(deleteIndexArr['index'], 1); + } + } + return data + }, + getFieldValue(value, orderData) { + if(value == '') return '' + let start = value.indexOf('{') + if (start != -1) { + let end = value.indexOf('}') + let keyStr = value.substring(start + 1, end) + let fieldKey = this.nameField[keyStr] + return value.replace('{'+ keyStr +'}', orderData[fieldKey]) + //return field + } + return value + }, + init(showData) { + showData = localStorage.getItem('word_data') + showData = JSON.parse(showData) + if (showData == null) { + showData = { header: [], - main: showData, + main: [], footer: [ { value: 'canvas-editor', size: 12 } ] - }, + } + } + if (this.updateStatus) { + showData.main = this.fillData(showData.main) + //console.log(showData) + } + if(this.instance != null) { + this.instance.destroy() + } + this.instance = new Editor( + document.querySelector('.editor'), + showData, {} ) + //console.log(this.instance) + }, + getSelectImage() { + const imageFileDom = document.querySelector('#image') + imageFileDom.click() + }, + selectImage(event) { + let _this = this + //console.log(event.target.files[0]) + const imageFileDom = document.querySelector('#image') + const file = event.target.files[0]//imageFileDom.files![0]! + const fileReader = new FileReader() + fileReader.readAsDataURL(file) + fileReader.onload = function () { + // 计算宽高 + const image = new Image() + const value = fileReader.result + image.src = value + image.onload = function () { + _this.instance.command.executeImage({ + value, + width: image.width, + height: image.height + }) + imageFileDom.value = '' + } + } }, - executeUndo() {//撤销 this.instance.command.executeUndo() }, @@ -894,6 +1194,9 @@ export default { executeItalic() {//斜体 this.instance.command.executeItalic() }, + executePrint() { + this.instance.command.executePrint() + }, executeUnderline() {//下划线 this.instance.command.executeUnderline() }, @@ -976,9 +1279,9 @@ export default { // 显示表格 const elements = document.querySelectorAll('.table-cel') elements.forEach(element => { - element.style.width = '4px' - element.style.height = '4px' - element.style.border = '1px solid #000' + element.style.width = '16px' + element.style.height = '16px' + //element.style.border = '1px solid #000' }) const tablePanelContainer = document.querySelector('.menu-item__table__collapse') tablePanelContainer.style.display = 'block' diff --git a/src/assets/style.css b/src/assets/style.css index 7f4e650..7d94a2e 100644 --- a/src/assets/style.css +++ b/src/assets/style.css @@ -465,8 +465,8 @@ ul { } .table-panel .table-cel.active { - border: 1px solid rgba(73, 145, 242, 0.2); - background: rgba(73, 145, 242, 0.15); + border: 1px solid rgba(73, 145, 242, .2); + background: rgba(73, 145, 242, .15); } .table-panel .table-row .table-cel:last-child { @@ -1074,5 +1074,19 @@ ul { .main_left { position: absolute; right: 300px; - top: 200px; -} \ No newline at end of file + top: 90px; +} + +.main_search_right { + margin-top: 100px; + position: absolute; + left: 10px; + top: 0; +} + +.main_search_left { + position: absolute; + left: 300px; + top: 90px; +} +