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 @@
+<script setup>
+import HelloWorld from './components/HelloWorld.vue'
+import TheWelcome from './components/TheWelcome.vue'
+</script>
+
+<template>
+	<div class="Cityk-common-layout">
+		<div>
+			<div class="menu" editor-component="menu">
+				<el-button @click="getHTMLValuea">保存配置</el-button>
+				<el-button @click="getShow">预览</el-button>
+				<!-- <el-button @click="getHTMLValue">保存样式</el-button> -->
+				<div class="menu-item">
+					<div class="menu-item__undo" @click="executeUndo">
+						<i></i>
+					</div>
+					<div class="menu-item__redo" @click="executeRedo">
+						<i></i>
+					</div>
+					<div class="menu-item__painter" title="格式刷(双击可连续使用)" @lclick="painterDom" @dbclick="dbPainterDom">
+						<i></i>
+					</div>
+					<div class="menu-item__format" title="清除格式" @click="executeFormat">
+						<i></i>
+					</div>
+				</div>
+				<div class="menu-divider"></div>
+				<div class="menu-item">
+					<div class="menu-item__font" @click="clickHandle2">
+						<span class="select" title="字体">微软雅黑</span>
+						<div class="options" @click="clickHandle3">
+							<ul>
+								<li data-family="Microsoft YaHei" style="font-family:'Microsoft YaHei';">微软雅黑</li>
+								<li data-family="宋体" style="font-family:'宋体';">宋体</li>
+								<li data-family="黑体" style="font-family:'黑体';">黑体</li>
+								<li data-family="仿宋" style="font-family:'仿宋';">仿宋</li>
+								<li data-family="楷体" style="font-family:'楷体';">楷体</li>
+								<li data-family="等线" style="font-family:'等线';">等线</li>
+								<li data-family="华文琥珀" style="font-family:'华文琥珀';">华文琥珀</li>
+								<li data-family="华文楷体" style="font-family:'华文楷体';">华文楷体</li>
+								<li data-family="华文隶书" style="font-family:'华文隶书';">华文隶书</li>
+								<li data-family="华文新魏" style="font-family:'华文新魏';">华文新魏</li>
+								<li data-family="华文行楷" style="font-family:'华文行楷';">华文行楷</li>
+								<li data-family="华文中宋" style="font-family:'华文中宋';">华文中宋</li>
+								<li data-family="华文彩云" style="font-family:'华文彩云';">华文彩云</li>
+								<li data-family="Arial" style="font-family:'Arial';">Arial</li>
+								<li data-family="Segoe UI" style="font-family:'Segoe UI';">Segoe UI</li>
+								<li data-family="Ink Free" style="font-family:'Ink Free';">Ink Free</li>
+								<li data-family="Fantasy" style="font-family:'Fantasy';">Fantasy</li>
+							</ul>
+						</div>
+					</div>
+					<div class="menu-item__size" @click="clickHandle4">
+						<span class="select" title="字体">小四</span>
+						<div class="options" @click="clickHandle5">
+							<ul>
+								<li data-size="56">初号</li>
+								<li data-size="48">小初</li>
+								<li data-size="34">一号</li>
+								<li data-size="32">小一</li>
+								<li data-size="29">二号</li>
+								<li data-size="24">小二</li>
+								<li data-size="21">三号</li>
+								<li data-size="20">小三</li>
+								<li data-size="18">四号</li>
+								<li data-size="16">小四</li>
+								<li data-size="14">五号</li>
+								<li data-size="12">小五</li>
+								<li data-size="10">六号</li>
+								<li data-size="8">小六</li>
+								<li data-size="7">七号</li>
+								<li data-size="6">八号</li>
+							</ul>
+						</div>
+					</div>
+					<div class="menu-item__size-add" @click="executeSizeAdd">
+						<i></i>
+					</div>
+					<div class="menu-item__size-minus" @click="executeSizeMinus">
+						<i></i>
+					</div>
+					<div class="menu-item__bold" @click="executeBold">
+						<i></i>
+					</div>
+					<div class="menu-item__italic" @click="executeItalic">
+						<i></i>
+					</div>
+					<div class="menu-item__underline" @click="executeUnderline">
+						<i></i>
+						<span class="select"></span>
+						<div class="options">
+							<ul>
+								<li data-decoration-style='solid'>
+									<i></i>
+								</li>
+								<li data-decoration-style='double'>
+									<i></i>
+								</li>
+								<li data-decoration-style='dashed'>
+									<i></i>
+								</li>
+								<li data-decoration-style='dotted'>
+									<i></i>
+								</li>
+								<li data-decoration-style='wavy'>
+									<i></i>
+								</li>
+							</ul>
+						</div>
+					</div>
+					<div class="menu-item__strikeout" title="删除线(Ctrl+Shift+X)" @click="executeStrikeout">
+						<i></i>
+					</div>
+					<div class="menu-item__superscript" @click="executeSuperscript">
+						<i></i>
+					</div>
+					<div class="menu-item__subscript" @click="executeSubscript">
+						<i></i>
+					</div>
+					<div class="menu-item__color" title="字体颜色">
+						<i></i>
+						<span></span>
+						<input type="color" id="color" />
+					</div>
+					<div class="menu-item__highlight" title="高亮">
+						<i></i>
+						<span></span>
+						<input type="color" id="highlight">
+					</div>
+				</div>
+				<div class="menu-divider"></div>
+				<div class="menu-item">
+					<div class="menu-item__title" @click="isShow = !isShow">
+						<i></i>
+						<span class="select" title="切换标题">正文</span>
+						<div class="options" :class="{ visible: isShow }">
+							<ul>
+								<li style="font-size:16px;">正文</li>
+								<li @click="executeTitle($event)" data-level="first" style="font-size:26px;">标题1
+								</li>
+								<li @click="executeTitle($event)" data-level="second" style="font-size:24px;">标题2
+								</li>
+								<li @click="executeTitle($event)" data-level="third" style="font-size:22px;">标题3
+								</li>
+								<li @click="executeTitle($event)" data-level="fourth" style="font-size:20px;">标题4
+								</li>
+								<li @click="executeTitle($event)" data-level="fifth" style="font-size:18px;">标题5
+								</li>
+								<li @click="executeTitle($event)" data-level="sixth" style="font-size:16px;">标题6
+								</li>
+							</ul>
+						</div>
+					</div>
+					<div class="menu-item__left" @click="rowFlexLeft">
+						<i></i>
+					</div>
+					<div class="menu-item__center" @click="rowFlexCenter">
+						<i></i>
+					</div>
+					<div class="menu-item__right" @click="rowFlexRight">
+						<i></i>
+					</div>
+					<div class="menu-item__alignment" @click="rowFlexAlignment">
+						<i></i>
+					</div>
+					<!--<div class="menu-item__justify">
+						<i></i>
+					</div>-->
+					<div class="menu-item__row-margin">
+						<i title="行间距"></i>
+						<div class="options">
+							<ul>
+								<li data-rowmargin='1'>1</li>
+								<li data-rowmargin="1.25">1.25</li>
+								<li data-rowmargin="1.5">1.5</li>
+								<li data-rowmargin="1.75">1.75</li>
+								<li data-rowmargin="2">2</li>
+								<li data-rowmargin="2.5">2.5</li>
+								<li data-rowmargin="3">3</li>
+							</ul>
+						</div>
+					</div>
+					<div class="menu-item__list">
+						<i></i>
+						<div class="options">
+							<ul>
+								<li>
+									<label>取消列表</label>
+								</li>
+								<li data-list-type="ol" data-list-style='decimal'>
+									<label>有序列表：</label>
+									<ol>
+										<li>________</li>
+									</ol>
+								</li>
+								<li data-list-type="ul" data-list-style='checkbox'>
+									<label>复选框列表：</label>
+									<ul style="list-style-type: '☑️ ';">
+										<li>________</li>
+									</ul>
+								</li>
+								<li data-list-type="ul" data-list-style='disc'>
+									<label>实心圆点列表：</label>
+									<ul style="list-style-type: disc;">
+										<li>________</li>
+									</ul>
+								</li>
+								<li data-list-type="ul" data-list-style='circle'>
+									<label>空心圆点列表：</label>
+									<ul style="list-style-type: circle;">
+										<li>________</li>
+									</ul>
+								</li>
+								<li data-list-type="ul" data-list-style='square'>
+									<label>空心方块列表：</label>
+									<ul style="list-style-type: square;">
+										<li>________</li>
+									</ul>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+				<div class="menu-divider"></div>
+				<div class="menu-item">
+					<div class="menu-item__table" @click="clickHandle7">
+						<i title="表格"></i>
+					</div>
+					<div class="menu-item__table__collapse">
+						<div class="table-close" @click="tableClose">×</div>
+						<div class="table-title">
+							<span class="table-select">插入</span>
+							<span>表格</span>
+						</div>
+						<div class="table-panel" @click="tablePanel" @mousemove="ceshi"></div>
+					</div>
+					<div class="menu-item__image">
+						<i title="图片"></i>
+						<input type="file" id="image" accept=".png, .jpg, .jpeg, .svg, .gif">
+					</div>
+					<div class="menu-item__hyperlink">
+						<i title="超链接"></i>
+					</div>
+					<div class="menu-item__separator">
+						<i title="分割线"></i>
+						<div class="options">
+							<ul>
+								<li data-separator='0,0'>
+									<i></i>
+								</li>
+								<li data-separator="1,1">
+									<i></i>
+								</li>
+								<li data-separator="3,1">
+									<i></i>
+								</li>
+								<li data-separator="4,4">
+									<i></i>
+								</li>
+								<li data-separator="7,3,3,3">
+									<i></i>
+								</li>
+								<li data-separator="6,2,2,2,2,2">
+									<i></i>
+								</li>
+							</ul>
+						</div>
+					</div>
+					<div class="menu-item__watermark">
+						<i title="水印(添加、删除)"></i>
+						<div class="options">
+							<ul>
+								<li data-menu="add">添加水印</li>
+								<li data-menu="delete">删除水印</li>
+							</ul>
+						</div>
+					</div>
+					<div class="menu-item__codeblock" title="代码块">
+						<i></i>
+					</div>
+					<div class="menu-item__page-break" title="分页符">
+						<i></i>
+					</div>
+					<div class="menu-item__control">
+						<i title="控件"></i>
+						<div class="options">
+							<ul>
+								<li data-control='text'>文本</li>
+								<li data-control="select">列举</li>
+								<li data-control="checkbox">复选框</li>
+								<li data-control="radio">单选框</li>
+							</ul>
+						</div>
+					</div>
+					<div class="menu-item__checkbox" title="复选框">
+						<i></i>
+					</div>
+					<!---<div class="menu-item__radio" title="单选框">
+						<i></i>
+					</div>-->
+					<div class="menu-item__latex" title="LateX">
+						<i></i>
+					</div>
+					<div class="menu-item__date">
+						<i title="日期"></i>
+						<div class="options">
+							<ul>
+								<li data-format="yyyy-MM-dd"></li>
+								<li data-format="yyyy-MM-dd hh:mm:ss"></li>
+							</ul>
+						</div>
+					</div>
+					<div class="menu-item__block" title="内容块">
+						<i></i>
+					</div>
+				</div>
+				<div class="menu-divider"></div>
+				<div class="menu-item">
+					<div class="menu-item__search" data-menu="search">
+						<i></i>
+					</div>
+					<div class="menu-item__search__collapse" data-menu="search">
+						<div class="menu-item__search__collapse__search">
+							<input type="text" />
+							<label class="search-result"></label>
+							<div class="arrow-left">
+								<i></i>
+							</div>
+							<div class="arrow-right">
+								<i></i>
+							</div>
+							<span>×</span>
+						</div>
+						<div class="menu-item__search__collapse__replace">
+							<input type="text">
+							<button>替换</button>
+						</div>
+					</div>
+					<div class="menu-item__print" data-menu="print">
+						<i></i>
+					</div>
+				</div>
+			</div>
+			<div class="catalog" editor-component="catalog">
+				<div class="catalog__header">
+					<span>目录</span>
+					<div class="catalog__header__close">
+						<i></i>
+					</div>
+				</div>
+				<div class="catalog__main"></div>
+			</div>
+			<div class="editor"></div>
+			<div class="comment" editor-component="comment"></div>
+			<div class="footer" editor-component="footer">
+				<div>
+					<div class="catalog-mode" title="目录">
+						<i></i>
+					</div>
+					<div class="page-mode">
+						<i title="页面模式(分页、连页)"></i>
+						<div class="options">
+							<ul>
+								<li data-page-mode="paging" class="active">分页</li>
+								<li data-page-mode="continuity">连页</li>
+							</ul>
+						</div>
+					</div>
+					<span>可见页码：<span class="page-no-list">1</span></span>
+					<span>页面：<span class="page-no">1</span>/<span class="page-size">1</span></span>
+					<span>字数：<span class="word-count">0</span></span>
+				</div>
+				<div class="editor-mode" title="编辑模式(编辑、清洁、只读、表单)">编辑模式</div>
+				<div>
+					<div class="page-scale-minus" title="缩小(Ctrl+-)">
+						<i></i>
+					</div>
+					<span class="page-scale-percentage" title="显示比例(点击可复原Ctrl+0)">100%</span>
+					<div class="page-scale-add" title="放大(Ctrl+=)">
+						<i></i>
+					</div>
+					<div class="paper-size">
+						<i title="纸张类型"></i>
+						<div class="options">
+							<ul>
+								<li data-paper-size="794*1123" class="active">A4</li>
+								<li data-paper-size="1593*2251">A2</li>
+								<li data-paper-size="1125*1593">A3</li>
+								<li data-paper-size="565*796">A5</li>
+								<li data-paper-size="412*488">5号信封</li>
+								<li data-paper-size="450*866">6号信封</li>
+								<li data-paper-size="609*862">7号信封</li>
+								<li data-paper-size="862*1221">9号信封</li>
+								<li data-paper-size="813*1266">法律用纸</li>
+								<li data-paper-size="813*1054">信纸</li>
+							</ul>
+						</div>
+					</div>
+					<div class="paper-direction">
+						<i title="纸张方向"></i>
+						<div class="options">
+							<ul>
+								<li data-paper-direction="vertical" class="active">纵向</li>
+								<li data-paper-direction="horizontal">横向</li>
+							</ul>
+						</div>
+					</div>
+					<div class="paper-margin" title="页边距">
+						<i></i>
+					</div>
+					<div class="fullscreen" title="全屏显示">
+						<i></i>
+					</div>
+					<!--<div class="editor-option" title="编辑器设置">
+						<i></i>
+					</div>-->
+				</div>
+			</div>
+			<div v-if="confShow" class="main_right">
+				<el-form ref="form" label-width="80px">
+					<!-- <el-form-item label="表格宽度" style="margin-bottom: 0;">
+						<el-input @input="isUpdate" v-model="tableWidth" size="small"></el-input>
+					</el-form-item>
+					<el-form-item label="表格高度" style="margin-bottom: 0;">
+						<el-input @input="isUpdate" v-model="tableHeight" size="small"></el-input>
+					</el-form-item>
+					<el-form-item label="表格列数" style="margin-bottom: 0;"> 
+						<el-input @input="isUpdate" v-model="tableCol" size="small"></el-input>
+					</el-form-item>-->
+					<div v-for="(item, index) in orderList" :key="index">
+						<div>订单信息{{ index }}:</div>
+						<div v-for="(value, key, index) in field">
+							<div v-if="nameField.hasOwnProperty(field[key])">
+								<el-form-item :label="field[key]" style="margin-bottom: 0;">
+									<el-input @input="isUpdate" v-model="item[key]" size="small"></el-input>
+								</el-form-item>
+
+							</div>
+						</div>
+						<hr>
+					</div>
+				</el-form>
+			</div>
+			<div v-if="confShow" class="main_left">
+				<el-form ref="form" label-width="100px">
+					<el-form-item label="" style="margin-bottom: 0;">
+						单击即复制成功
+					</el-form-item>
+					<div v-for="(value, key, index) in field">
+						<el-form-item :label="field[key]" @click="copy(field[key])" style="margin-bottom: 0;">
+							<span @click.stop="copy('{' + field[key] + '}')">{{ '{' + field[key] + '}' }}</span>
+							<!-- <el-checkbox @change="isUpdate" name="type" v-model="showObj[key]">
+							</el-checkbox> -->
+						</el-form-item>
+					</div>
+				</el-form>
+			</div>
+			<!-- <div v-if="confShow" class="main_left">
+				<div>拖拽此列调整位置</div>
+				<el-form ref="form" label-width="80px">
+					<draggable :list="fieldArr" ghost-class="ghost" item-key="id" :sort="true" chosen-class="chosenClass" animation="300"
+						@start="onStart" @end="onEnd">
+						<template #item="{ element }" >
+							<el-form-item :label="element.name"  style="margin-bottom: 0;">
+								<el-checkbox @change="isUpdate" name="type" v-model="showObj[element.field]">
+									是否展示
+								</el-checkbox>
+							</el-form-item>
+						</template>
+</draggable>
+</el-form>
+</div> -->
+			<!--<div class="canvas-editor" style="height:1000px;width:1000px;margin:0 auto"></div>-->
+		</div>
+	</div>
+</template>
+<script>
+import Editor, {
+	BlockType,
+	Command,
+	ControlType,
+	EditorMode,
+	EditorZone,
+	ElementType,
+	KeyMap,
+	ListStyle,
+	ListType,
+	PageMode,
+	PaperDirection,
+	RowFlex,
+	TitleLevel
+} from '@hufe921/canvas-editor'
+import axios from 'axios'
+import draggable from "vuedraggable"
+export default {
+	data() {
+		return {
+			fieldArr: [],
+			confShow: true,
+			tableCol: 4,
+			isShow: false,
+			instance: null,
+			tableCellList: [],
+			colIndex: 10,
+			rowIndex: 10,
+			orderData: {},
+			field: {},
+			nameField: {},
+			saveData: {},
+			updateStatus: false,
+			orderList: [],
+			showObj: {},
+			config: {},
+			tableHeight: 42,
+			tableWidth: 556,
+			aRow: {}
+		}
+	},
+	mounted() {
+		this.login()
+	},
+	methods: {
+		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("开始拖拽")
+		},
+		onEnd() {
+			//console.log(this.fieldArr)
+			console.log("结束拖拽")
+			this.updateStatus = true
+			this.updateDoc(this.orderList)
+		},
+		isUpdate() {
+			if (this.tableCol == '' || this.tableCol == '0') {
+				return false
+			}
+			this.updateStatus = true
+			this.updateDoc(this.orderList)
+		},
+		updateWord() {
+			const ccc = this.instance.command.getValue()
+			this.updateStatus = true
+			//console.log(this.orderList)
+			this.updateDoc(this.orderList)
+		},
+		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'
+			}
+			axios.post(api, param, { headers: headers }).then(res => {
+				this.getApiField()
+			})
+		},
+		getApiField() {
+			let api = '/api/Administrator/ProductColConfig/getUserConfig'
+			axios.get(api).then(res => {
+				//let field = res.data
+				let fieldArr = res.data.data
+				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
+
+				}
+				this.nameField = nameField
+				this.showObj = showObj
+				this.field = fieldObj
+				this.fieldArr = fieldArr
+				this.getApiData()
+			})
+		},
+		getApiData() {
+			let api = '/api/Administrator/InquiryOrder/getOrderInfo?order_id=E2024060509560254698592'
+			let api2 = '/api/Administrator/OrderFieldStyle/getUserConfig?type=1'
+			const request1 = axios.get(api)
+			const request2 = axios.get(api2)
+			axios.all([request1, request2]).then(axios.spread((response1, response2) => {
+				//.log(response1, response2)
+				let data = response1.data
+				this.orderList = data.data.orderExt.productList
+				let orderData = data.data.orderExt.productList
+				let data2 = response2.data
+				this.orderData = orderData
+				if (data2.code == 1) {
+					this.config = data2.data
+					for (let key in this.showObj) {
+						if (!this.config.hasOwnProperty(key)) {
+							this.showObj[key] = false
+						}
+					}
+					this.sortData(data2.data)
+				}
+				this.updateDoc(orderData)
+			}))
+		},
+		sortData(styleData) {
+			let tempObj = {}
+			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)) {
+					tempArr.push(tempObj[key])
+				}
+			}
+			for (let styleKey in styleData) {
+				tempArr.push(tempObj[styleKey])
+			}
+			this.fieldArr = tempArr
+		},
+		getTest(data) {
+			let nArr = data.split('\n')
+			let saveData = {}
+			for (let i = 0; i < nArr.length; i++) {
+				let item = nArr[i].split(' ').filter(it => it !== '')
+				if (item.length > 2) {
+					item = this.packageItem(item)
+				}
+
+				for (let j = 0; j < item.length; j++) {
+					let itemArr = item[j].split(':')
+					if (this.nameField.hasOwnProperty(itemArr[0])) {
+						saveData[this.nameField[itemArr[0]]] = itemArr[1]
+					}
+				}
+			}
+			this.saveData = saveData
+
+			if (this.updateStatus) {
+				this.updateDoc(saveData)
+			}
+		},
+		updateDoc(orderData) {
+			let _this = this
+			//let width = 553 / this.tableCol
+			let width = _this.tableWidth / _this.tableCol
+			let showData = []
+			let cols = []
+			for (let c = 0; c < _this.tableCol; c++) {
+				let widthItem = { "width": width }
+				cols.push(widthItem)
+			}
+			let tableHeight = parseInt(_this.tableHeight)
+			let table = { "value": "", "type": "table", rowFlex: 'center', "trList": [], "width": _this.tableWidth, "height": 126, "colgroup": [] }
+			table.colgroup = cols
+			let trList = [{ "minHeight": tableHeight, "height": tableHeight, "tdList": [{ 'verticalAlign': 'middle', "colspan": _this.tableCol, "rowspan": 1, "value": [{ "value": "订单详情", "size": 18, 'rowFlex': 'center', bold: 'bolder' }] }] }]
+
+			let tdList = []
+			let ind = 1
+			let len = parseInt(_this.tableCol)
+			let temList = []
+			orderData.forEach(function (item) {
+
+				if (tdList.length > 0) {
+					let temLen = len - tdList.length
+					let obj = _this.fillBlank(len, tdList, temList)
+					trList.push(obj.trListItem1)
+					trList.push(obj.trListItem2)
+					tdList = []
+					temList = []
+					ind += temLen
+				}
+
+				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++) {
+					let key = _this.fieldArr[j].field
+					if (!_this.showObj[key]) continue
+
+					let value = {}
+					let temValue = {}
+					if (_this.config.hasOwnProperty(key)) {//
+						let field_style = JSON.parse(JSON.stringify(_this.config[key]['field_style']))
+						//let title = _this.fieldArr[j].name//_this.field[key]
+						field_style.value = _this.fieldArr[j].name
+
+						value = { 'verticalAlign': 'middle', "colspan": 1, "rowspan": 1, "value": [field_style] }
+						let value_style = JSON.parse(JSON.stringify(_this.config[key]['value_style']))
+						//let field_value = item[key]
+						value_style.value = item[key]
+
+						temValue = { 'verticalAlign': 'middle', "colspan": 1, "rowspan": 1, "value": [value_style] }
+					} else {
+						value = { 'verticalAlign': 'middle', "colspan": 1, "rowspan": 1, "value": [{ "value": _this.fieldArr[j].name, "size": 16, 'rowFlex': RowFlex.CENTER }] }
+						temValue = { 'verticalAlign': 'middle', "colspan": 1, "rowspan": 1, "value": [{ "value": item[key], "size": 14, 'rowFlex': RowFlex.CENTER }] }
+					}
+
+					tdList.push(value)
+					temList.push(temValue)
+					if (ind % len == 0) {
+						let trListItem = { "minHeight": tableHeight, "height": tableHeight, "tdList": [] }
+						trListItem.tdList = tdList
+						trList.push(trListItem)
+						tdList = []
+
+						trListItem = { "minHeight": tableHeight, "height": tableHeight, "tdList": [] }
+						for (let index = 0; index < temList.length; index++) {
+							tdList.push(temList[index])
+						}
+						trListItem.tdList = tdList
+						trList.push(trListItem)
+						tdList = []
+						temList = []
+					}
+					ind++
+
+				}
+			})
+
+			if (tdList.length > 0) {
+				let obj = this.fillBlank(len, tdList, temList)
+				trList.push(obj.trListItem1)
+				trList.push(obj.trListItem2)
+			}
+			table.trList = trList
+			showData.push(table)
+			this.init(showData)
+		},
+
+		fillBlank(len, tdList, temList) {
+			let temLen = len - tdList.length
+			let tableHeight = parseInt(this.tableHeight)
+			for (let g = 0; g < temLen; g++) {
+				let value = { "colspan": 1, "rowspan": 1, "value": [{ "value": "", "size": 16 }] }
+				tdList.push(value)
+			}
+			let trListItem1 = { "minHeight": tableHeight, "height": tableHeight, "tdList": [] }
+			trListItem1.tdList = tdList
+			//trList.push(trListItem)
+
+			tdList = []
+			let trListItem2 = { "minHeight": tableHeight, "height": tableHeight, "tdList": [] }
+			for (let index = 0; index < temList.length; index++) {
+				tdList.push(temList[index])
+			}
+			for (let g = 0; g < temLen; g++) {
+				let value = { "colspan": 1, "rowspan": 1, "value": [{ "value": "", "size": 16 }] }
+				tdList.push(value)
+			}
+			trListItem2 = { "minHeight": tableHeight, "height": tableHeight, "tdList": [] }
+			trListItem2.tdList = tdList
+			return { trListItem1: trListItem1, trListItem2: trListItem2 }
+		},
+
+		packageItem(arr) {
+			let k = 0
+			for (let i = 0; i < arr.length; i++) {
+				if (arr[i].split(':').length > 1) {
+					k = i
+
+				} else {
+					arr[k] += arr[i]
+
+				}
+			}
+			return arr.filter(it => it.split(':').length > 1)
+		},
+		getHTMLValuea() {
+			const ccc = this.instance.command.getValue()
+			//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()
+			//console.log(ccc)
+			//console.log(this.nameField)
+			let data = ccc.data.main[0].trList
+			let flag = 1
+			let saveData = []
+			let tempFile = []
+			let tempData = {}
+			let isBreak = false
+			for (let i = 0; i < data.length; i++) {
+				if (flag % 2 == 1) {
+					if (data[i].tdList.length > 1) {
+						for (let j = 0; j < data[i].tdList.length; j++) {
+							let name = data[i].tdList[j].value[0].value
+							let style = data[i].tdList[j].value[0]
+							delete style.value
+							if (this.nameField.hasOwnProperty(name)) {
+								let fieldKey = this.nameField[name]
+								if (tempData.hasOwnProperty(fieldKey)) {
+									isBreak = true
+									break
+								}
+								tempData[fieldKey] = { 'field_style': style, 'type': 1, 'field': fieldKey }
+								tempFile.push(fieldKey)
+							}
+						}
+						flag++
+					}
+				} else {
+					if (isBreak) {
+						break
+					}
+					for (let j = 0; j < data[i].tdList.length; j++) {
+						let fieldKey = tempFile[j]
+						if (typeof fieldKey === 'undefined') continue
+						let style = data[i].tdList[j].value[0]
+						delete style.value
+						tempData[fieldKey]['value_style'] = style
+					}
+
+					tempFile = []
+					flag++
+				}
+			}
+			for (let key in tempData) {
+				saveData.push(tempData[key])
+			}
+			//.log(saveData)
+			//return false
+			let api = '/api/Administrator/OrderFieldStyle/save'
+			axios.post(api, saveData).then((res) => {
+
+			})
+
+		},
+		getLen(value) {
+			let arr = value.split('')
+			var regexForNumbers = /^\d+$/;
+
+			// 匹配字母
+			var regexForLetters = /^[A-Za-z]+$/;
+			let count = 0
+			for (let i = 0; i < arr.length; i++) {
+				if (regexForNumbers.test(arr[i]) || regexForLetters.test(arr[i]) || arr[i] == ':' || arr[i] == '.' || arr[i] == ' ') {
+					count++
+				} else {
+					count += 2
+				}
+			}
+			if (count > 40) {
+				count = 40
+			}
+			return count
+
+		},
+		fillData(config) {
+			let result = []
+			let orderData = this.orderData
+			let tempList = []
+			let tempTrList = []
+			let tableIndex = 0
+			for (let o = 0; o < orderData.length; o++) {
+				let data = JSON.parse(JSON.stringify(config))
+				for (let i = 0; i < config.length; i++) {
+					if (!config[i].hasOwnProperty('type') && config[i].value.indexOf('{') == -1) {
+						if(o == 0) {
+							result.push(data[i])
+						}
+						
+					} else {
+						let temp = JSON.parse(JSON.stringify(config[i]))
+						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
+							temp.value = this.getFieldValue(value, order)
+							result.push(temp)
+						}
+					}
+				}
+			}
+			config[tableIndex].trList = tempTrList
+			//config
+			return config
+		},
+		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])
+
+						}
+						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: [],
+					footer: [
+						{
+							value: 'canvas-editor',
+							size: 12
+						}
+					]
+				}
+			}
+			if (this.updateStatus) {
+				showData.main = this.fillData(showData.main)
+				console.log(showData)
+				this.instance.destroy()
+			}
+
+			this.instance = new Editor(
+				document.querySelector('.editor'),
+				showData,
+				{}
+			)
+		},
+
+		executeUndo() {//撤销
+			this.instance.command.executeUndo()
+		},
+		executeRedo() {//重做 反撤销  
+			this.instance.command.executeRedo()
+		},
+		painterDom() {//格式刷(双击可连续使用)
+			this.instance.command.executePainter({
+				isDblclick: false
+			})
+		},
+		dbPainterDom() {
+			this.instance.command.executePainter({
+				isDblclick: true
+			})
+		},
+		executeFormat() {//清除格式
+			this.instance.command.executeFormat()
+		},
+		executeSizeAdd() {//增大字号
+			this.instance.command.executeSizeAdd()
+		},
+		executeSizeMinus() {//减小字号
+			this.instance.command.executeSizeMinus()
+		},
+		executeBold() {//加粗
+			this.instance.command.executeBold()
+		},
+		executeItalic() {//斜体
+			this.instance.command.executeItalic()
+		},
+		executeUnderline() {//下划线
+			this.instance.command.executeUnderline()
+		},
+		executeUnderline() {
+			this.instance.command.executeUnderline()
+		},
+		executeStrikeout() {
+			this.instance.command.executeStrikeout()
+		},
+		executeSuperscript() {
+			this.instance.command.executeSuperscript()
+		},
+		executeSubscript() {
+			this.instance.command.executeSubscript()
+		},
+		executeTitle(event) {
+			const li = event.target;
+			// 获取元素的属性值
+			const level = li.getAttribute('data-level')
+			this.instance.command.executeTitle(level || null)
+		},
+		rowFlexLeft() {
+			this.instance.command.executeRowFlex(RowFlex.LEFT)
+		},
+		rowFlexCenter() {
+			this.instance.command.executeRowFlex(RowFlex.CENTER)
+		},
+		rowFlexRight() {
+			this.instance.command.executeRowFlex(RowFlex.RIGHT)
+		},
+		rowFlexAlignment() {
+			this.instance.command.executeRowFlex(RowFlex.ALIGNMENT)
+		},
+		clickHandle2() {
+			const fontDom = document.querySelector('.menu-item__font')
+			const fontOptionDom = fontDom.querySelector('.options')
+			fontOptionDom.classList.toggle('visible')
+		},
+		clickHandle3(evt) {
+			if (evt.target && evt.target.matches('li')) {
+				// 获取data-family属性（注意，在JavaScript中不需要使用!来断言非空）
+				const family = evt.target.dataset.family
+				if (family) {
+					// 确保family存在
+					// 假设instance和它的command属性以及executeFont方法都已经被正确定义和初始化
+					this.instance.command.executeFont(family)
+				}
+			}
+		},
+		clickHandle4() {
+			const sizeSetDom = document.querySelector('.menu-item__size')
+			const sizeOptionDom = sizeSetDom.querySelector('.options')
+			sizeOptionDom.classList.toggle('visible')
+		},
+		clickHandle5(evt) {
+			const li = evt.target
+			this.instance.command.executeSize(li.dataset.size)
+		},
+
+		clickHandle7() {
+			const tablePanel = document.querySelector('.table-panel')
+			// 绘制行列
+			console.log('clickHandle7 方法被调用了！')
+			for (let i = 0; i < 10; i++) {
+				const tr = document.createElement('tr')
+				tr.classList.add('table-row')
+				const trCellList = []
+				for (let j = 0; j < 10; j++) {
+					const td = document.createElement('td')
+					td.classList.add('table-cel')
+					tr.append(td)
+					trCellList.push(td)
+				}
+				tablePanel.append(tr)
+
+				this.tableCellList.push(trCellList)
+				this.colIndex = 0
+				this.rowIndex = 0
+			}
+			// 显示表格
+			const elements = document.querySelectorAll('.table-cel')
+			elements.forEach(element => {
+				element.style.width = '4px'
+				element.style.height = '4px'
+				element.style.border = '1px solid #000'
+			})
+			const tablePanelContainer = document.querySelector('.menu-item__table__collapse')
+			tablePanelContainer.style.display = 'block'
+		},
+		// 移除所有格选择
+		removeAllTableCellSelect() {
+			this.tableCellList.forEach(tr => {
+				tr.forEach(td => td.classList.remove('active'))
+			})
+		},
+		// 设置标题内容
+		setTableTitle(payload) {
+			const tableTitle = document.querySelector('.table-select')
+			tableTitle.innerText = payload
+		},
+		// 恢复初始状态
+		recoveryTable() {
+			const tablePanelContainer = document.querySelector('.menu-item__table__collapse')
+			// 还原选择样式、标题、选择行列
+			this.removeAllTableCellSelect()
+			this.setTableTitle('插入')
+			this.colIndex = 0
+			this.rowIndex = 0
+			// 隐藏panel
+			tablePanelContainer.style.display = 'none'
+		},
+
+		ceshi(evt) {
+			const celSize = 16
+			const rowMarginTop = 10
+			const celMarginRight = 6
+			const { offsetX, offsetY } = evt
+			// 移除所有选择
+			this.removeAllTableCellSelect()
+			this.colIndex = Math.ceil(offsetX / (celSize + celMarginRight)) || 1
+			this.rowIndex = Math.ceil(offsetY / (celSize + rowMarginTop)) || 1
+			// 改变选择样式
+			this.tableCellList.forEach((tr, trIndex) => {
+				tr.forEach((td, tdIndex) => {
+					if (tdIndex < this.colIndex && trIndex < this.rowIndex) {
+						td.classList.add('active')
+					}
+				})
+			})
+			// 改变表格标题
+			this.setTableTitle(`${this.rowIndex}×${this.colIndex}`)
+		},
+		tableClose() {
+			this.recoveryTable()
+		},
+		tablePanel() {
+			// 应用选择
+			this.instance.command.executeInsertTable(this.rowIndex, this.colIndex)
+			this.recoveryTable()
+		}
+	}
+}
+</script>
+<style scoped>
+@import url('./components/dialog/dialog.css');
+@import url('./components/signature/signature.css');
+</style>
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 @@
+<script setup>
+import HelloWorld from './components/HelloWorld.vue'
+import TheWelcome from './components/TheWelcome.vue'
+</script>
+
+<template>
+	<div class="Cityk-common-layout">
+		<div>
+			<div class="menu" editor-component="menu">
+				<el-button @click="getHTMLValuea">文档数据</el-button>
+				<!-- <el-button @click="updateWord">更新文档</el-button> -->
+				<el-button @click="getHTMLValue">保存样式</el-button>
+				<div class="menu-item">
+					<div class="menu-item__undo" @click="executeUndo">
+						<i></i>
+					</div>
+					<div class="menu-item__redo" @click="executeRedo">
+						<i></i>
+					</div>
+					<div class="menu-item__painter" title="格式刷(双击可连续使用)" @lclick="painterDom" @dbclick="dbPainterDom">
+						<i></i>
+					</div>
+					<div class="menu-item__format" title="清除格式" @click="executeFormat">
+						<i></i>
+					</div>
+				</div>
+				<div class="menu-divider"></div>
+				<div class="menu-item">
+					<div class="menu-item__font" @click="clickHandle2">
+						<span class="select" title="字体">微软雅黑</span>
+						<div class="options" @click="clickHandle3">
+							<ul>
+								<li data-family="Microsoft YaHei" style="font-family:'Microsoft YaHei';">微软雅黑</li>
+								<li data-family="宋体" style="font-family:'宋体';">宋体</li>
+								<li data-family="黑体" style="font-family:'黑体';">黑体</li>
+								<li data-family="仿宋" style="font-family:'仿宋';">仿宋</li>
+								<li data-family="楷体" style="font-family:'楷体';">楷体</li>
+								<li data-family="等线" style="font-family:'等线';">等线</li>
+								<li data-family="华文琥珀" style="font-family:'华文琥珀';">华文琥珀</li>
+								<li data-family="华文楷体" style="font-family:'华文楷体';">华文楷体</li>
+								<li data-family="华文隶书" style="font-family:'华文隶书';">华文隶书</li>
+								<li data-family="华文新魏" style="font-family:'华文新魏';">华文新魏</li>
+								<li data-family="华文行楷" style="font-family:'华文行楷';">华文行楷</li>
+								<li data-family="华文中宋" style="font-family:'华文中宋';">华文中宋</li>
+								<li data-family="华文彩云" style="font-family:'华文彩云';">华文彩云</li>
+								<li data-family="Arial" style="font-family:'Arial';">Arial</li>
+								<li data-family="Segoe UI" style="font-family:'Segoe UI';">Segoe UI</li>
+								<li data-family="Ink Free" style="font-family:'Ink Free';">Ink Free</li>
+								<li data-family="Fantasy" style="font-family:'Fantasy';">Fantasy</li>
+							</ul>
+						</div>
+					</div>
+					<div class="menu-item__size" @click="clickHandle4">
+						<span class="select" title="字体">小四</span>
+						<div class="options" @click="clickHandle5">
+							<ul>
+								<li data-size="56">初号</li>
+								<li data-size="48">小初</li>
+								<li data-size="34">一号</li>
+								<li data-size="32">小一</li>
+								<li data-size="29">二号</li>
+								<li data-size="24">小二</li>
+								<li data-size="21">三号</li>
+								<li data-size="20">小三</li>
+								<li data-size="18">四号</li>
+								<li data-size="16">小四</li>
+								<li data-size="14">五号</li>
+								<li data-size="12">小五</li>
+								<li data-size="10">六号</li>
+								<li data-size="8">小六</li>
+								<li data-size="7">七号</li>
+								<li data-size="6">八号</li>
+							</ul>
+						</div>
+					</div>
+					<div class="menu-item__size-add" @click="executeSizeAdd">
+						<i></i>
+					</div>
+					<div class="menu-item__size-minus" @click="executeSizeMinus">
+						<i></i>
+					</div>
+					<div class="menu-item__bold" @click="executeBold">
+						<i></i>
+					</div>
+					<div class="menu-item__italic" @click="executeItalic">
+						<i></i>
+					</div>
+					<div class="menu-item__underline" @click="executeUnderline">
+						<i></i>
+						<span class="select"></span>
+						<div class="options">
+							<ul>
+								<li data-decoration-style='solid'>
+									<i></i>
+								</li>
+								<li data-decoration-style='double'>
+									<i></i>
+								</li>
+								<li data-decoration-style='dashed'>
+									<i></i>
+								</li>
+								<li data-decoration-style='dotted'>
+									<i></i>
+								</li>
+								<li data-decoration-style='wavy'>
+									<i></i>
+								</li>
+							</ul>
+						</div>
+					</div>
+					<div class="menu-item__strikeout" title="删除线(Ctrl+Shift+X)" @click="executeStrikeout">
+						<i></i>
+					</div>
+					<div class="menu-item__superscript" @click="executeSuperscript">
+						<i></i>
+					</div>
+					<div class="menu-item__subscript" @click="executeSubscript">
+						<i></i>
+					</div>
+					<div class="menu-item__color" title="字体颜色">
+						<i></i>
+						<span></span>
+						<input type="color" id="color" />
+					</div>
+					<div class="menu-item__highlight" title="高亮">
+						<i></i>
+						<span></span>
+						<input type="color" id="highlight">
+					</div>
+				</div>
+				<div class="menu-divider"></div>
+				<div class="menu-item">
+					<div class="menu-item__title" @click="isShow = !isShow">
+						<i></i>
+						<span class="select" title="切换标题">正文</span>
+						<div class="options" :class="{ visible: isShow }">
+							<ul>
+								<li style="font-size:16px;">正文</li>
+								<li @click="executeTitle($event)" data-level="first" style="font-size:26px;">标题1
+								</li>
+								<li @click="executeTitle($event)" data-level="second" style="font-size:24px;">标题2
+								</li>
+								<li @click="executeTitle($event)" data-level="third" style="font-size:22px;">标题3
+								</li>
+								<li @click="executeTitle($event)" data-level="fourth" style="font-size:20px;">标题4
+								</li>
+								<li @click="executeTitle($event)" data-level="fifth" style="font-size:18px;">标题5
+								</li>
+								<li @click="executeTitle($event)" data-level="sixth" style="font-size:16px;">标题6
+								</li>
+							</ul>
+						</div>
+					</div>
+					<div class="menu-item__left" @click="rowFlexLeft">
+						<i></i>
+					</div>
+					<div class="menu-item__center" @click="rowFlexCenter">
+						<i></i>
+					</div>
+					<div class="menu-item__right" @click="rowFlexRight">
+						<i></i>
+					</div>
+					<div class="menu-item__alignment" @click="rowFlexAlignment">
+						<i></i>
+					</div>
+					<!--<div class="menu-item__justify">
+						<i></i>
+					</div>-->
+					<div class="menu-item__row-margin">
+						<i title="行间距"></i>
+						<div class="options">
+							<ul>
+								<li data-rowmargin='1'>1</li>
+								<li data-rowmargin="1.25">1.25</li>
+								<li data-rowmargin="1.5">1.5</li>
+								<li data-rowmargin="1.75">1.75</li>
+								<li data-rowmargin="2">2</li>
+								<li data-rowmargin="2.5">2.5</li>
+								<li data-rowmargin="3">3</li>
+							</ul>
+						</div>
+					</div>
+					<div class="menu-item__list">
+						<i></i>
+						<div class="options">
+							<ul>
+								<li>
+									<label>取消列表</label>
+								</li>
+								<li data-list-type="ol" data-list-style='decimal'>
+									<label>有序列表：</label>
+									<ol>
+										<li>________</li>
+									</ol>
+								</li>
+								<li data-list-type="ul" data-list-style='checkbox'>
+									<label>复选框列表：</label>
+									<ul style="list-style-type: '☑️ ';">
+										<li>________</li>
+									</ul>
+								</li>
+								<li data-list-type="ul" data-list-style='disc'>
+									<label>实心圆点列表：</label>
+									<ul style="list-style-type: disc;">
+										<li>________</li>
+									</ul>
+								</li>
+								<li data-list-type="ul" data-list-style='circle'>
+									<label>空心圆点列表：</label>
+									<ul style="list-style-type: circle;">
+										<li>________</li>
+									</ul>
+								</li>
+								<li data-list-type="ul" data-list-style='square'>
+									<label>空心方块列表：</label>
+									<ul style="list-style-type: square;">
+										<li>________</li>
+									</ul>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+				<div class="menu-divider"></div>
+				<div class="menu-item">
+					<div class="menu-item__table" @click="clickHandle7">
+						<i title="表格"></i>
+					</div>
+					<div class="menu-item__table__collapse">
+						<div class="table-close" @click="tableClose">×</div>
+						<div class="table-title">
+							<span class="table-select">插入</span>
+							<span>表格</span>
+						</div>
+						<div class="table-panel" @click="tablePanel" @mousemove="ceshi"></div>
+					</div>
+					<div class="menu-item__image">
+						<i title="图片"></i>
+						<input type="file" id="image" accept=".png, .jpg, .jpeg, .svg, .gif">
+					</div>
+					<div class="menu-item__hyperlink">
+						<i title="超链接"></i>
+					</div>
+					<div class="menu-item__separator">
+						<i title="分割线"></i>
+						<div class="options">
+							<ul>
+								<li data-separator='0,0'>
+									<i></i>
+								</li>
+								<li data-separator="1,1">
+									<i></i>
+								</li>
+								<li data-separator="3,1">
+									<i></i>
+								</li>
+								<li data-separator="4,4">
+									<i></i>
+								</li>
+								<li data-separator="7,3,3,3">
+									<i></i>
+								</li>
+								<li data-separator="6,2,2,2,2,2">
+									<i></i>
+								</li>
+							</ul>
+						</div>
+					</div>
+					<div class="menu-item__watermark">
+						<i title="水印(添加、删除)"></i>
+						<div class="options">
+							<ul>
+								<li data-menu="add">添加水印</li>
+								<li data-menu="delete">删除水印</li>
+							</ul>
+						</div>
+					</div>
+					<div class="menu-item__codeblock" title="代码块">
+						<i></i>
+					</div>
+					<div class="menu-item__page-break" title="分页符">
+						<i></i>
+					</div>
+					<div class="menu-item__control">
+						<i title="控件"></i>
+						<div class="options">
+							<ul>
+								<li data-control='text'>文本</li>
+								<li data-control="select">列举</li>
+								<li data-control="checkbox">复选框</li>
+								<li data-control="radio">单选框</li>
+							</ul>
+						</div>
+					</div>
+					<div class="menu-item__checkbox" title="复选框">
+						<i></i>
+					</div>
+					<!---<div class="menu-item__radio" title="单选框">
+						<i></i>
+					</div>-->
+					<div class="menu-item__latex" title="LateX">
+						<i></i>
+					</div>
+					<div class="menu-item__date">
+						<i title="日期"></i>
+						<div class="options">
+							<ul>
+								<li data-format="yyyy-MM-dd"></li>
+								<li data-format="yyyy-MM-dd hh:mm:ss"></li>
+							</ul>
+						</div>
+					</div>
+					<div class="menu-item__block" title="内容块">
+						<i></i>
+					</div>
+				</div>
+				<div class="menu-divider"></div>
+				<div class="menu-item">
+					<div class="menu-item__search" data-menu="search">
+						<i></i>
+					</div>
+					<div class="menu-item__search__collapse" data-menu="search">
+						<div class="menu-item__search__collapse__search">
+							<input type="text" />
+							<label class="search-result"></label>
+							<div class="arrow-left">
+								<i></i>
+							</div>
+							<div class="arrow-right">
+								<i></i>
+							</div>
+							<span>×</span>
+						</div>
+						<div class="menu-item__search__collapse__replace">
+							<input type="text">
+							<button>替换</button>
+						</div>
+					</div>
+					<div class="menu-item__print" data-menu="print">
+						<i></i>
+					</div>
+				</div>
+			</div>
+			<div class="catalog" editor-component="catalog">
+				<div class="catalog__header">
+					<span>目录</span>
+					<div class="catalog__header__close">
+						<i></i>
+					</div>
+				</div>
+				<div class="catalog__main"></div>
+			</div>
+			<div class="editor"></div>
+			<div class="comment" editor-component="comment"></div>
+			<div class="footer" editor-component="footer">
+				<div>
+					<div class="catalog-mode" title="目录">
+						<i></i>
+					</div>
+					<div class="page-mode">
+						<i title="页面模式(分页、连页)"></i>
+						<div class="options">
+							<ul>
+								<li data-page-mode="paging" class="active">分页</li>
+								<li data-page-mode="continuity">连页</li>
+							</ul>
+						</div>
+					</div>
+					<span>可见页码：<span class="page-no-list">1</span></span>
+					<span>页面：<span class="page-no">1</span>/<span class="page-size">1</span></span>
+					<span>字数：<span class="word-count">0</span></span>
+				</div>
+				<div class="editor-mode" title="编辑模式(编辑、清洁、只读、表单)">编辑模式</div>
+				<div>
+					<div class="page-scale-minus" title="缩小(Ctrl+-)">
+						<i></i>
+					</div>
+					<span class="page-scale-percentage" title="显示比例(点击可复原Ctrl+0)">100%</span>
+					<div class="page-scale-add" title="放大(Ctrl+=)">
+						<i></i>
+					</div>
+					<div class="paper-size">
+						<i title="纸张类型"></i>
+						<div class="options">
+							<ul>
+								<li data-paper-size="794*1123" class="active">A4</li>
+								<li data-paper-size="1593*2251">A2</li>
+								<li data-paper-size="1125*1593">A3</li>
+								<li data-paper-size="565*796">A5</li>
+								<li data-paper-size="412*488">5号信封</li>
+								<li data-paper-size="450*866">6号信封</li>
+								<li data-paper-size="609*862">7号信封</li>
+								<li data-paper-size="862*1221">9号信封</li>
+								<li data-paper-size="813*1266">法律用纸</li>
+								<li data-paper-size="813*1054">信纸</li>
+							</ul>
+						</div>
+					</div>
+					<div class="paper-direction">
+						<i title="纸张方向"></i>
+						<div class="options">
+							<ul>
+								<li data-paper-direction="vertical" class="active">纵向</li>
+								<li data-paper-direction="horizontal">横向</li>
+							</ul>
+						</div>
+					</div>
+					<div class="paper-margin" title="页边距">
+						<i></i>
+					</div>
+					<div class="fullscreen" title="全屏显示">
+						<i></i>
+					</div>
+					<!--<div class="editor-option" title="编辑器设置">
+						<i></i>
+					</div>-->
+				</div>
+			</div>
+			<div v-if="confShow" class="main_right">
+				<el-form ref="form" label-width="80px">
+					<el-form-item label="表格宽度" style="margin-bottom: 0;">
+						<el-input @input="isUpdate" v-model="tableWidth" size="small"></el-input>
+					</el-form-item>
+					<el-form-item label="表格高度" style="margin-bottom: 0;">
+						<el-input @input="isUpdate" v-model="tableHeight" size="small"></el-input>
+					</el-form-item>
+					<el-form-item label="表格列数" style="margin-bottom: 0;">
+						<el-input @input="isUpdate" v-model="tableCol" size="small"></el-input>
+					</el-form-item>
+					<div v-for="(item, index) in orderList" :key="index">
+						<div>订单信息{{ index }}:</div>
+						<div v-for="(value, key, index) in field">
+							<div v-if="nameField.hasOwnProperty(field[key])">
+								<el-form-item :label="field[key]" style="margin-bottom: 0;">
+									<el-input @input="isUpdate" v-model="item[key]" size="small"></el-input>
+								</el-form-item>
+
+							</div>
+						</div>
+						<hr>
+					</div>
+				</el-form>
+			</div>
+			<!-- <div v-if="confShow" class="main_left">
+				<el-form ref="form" label-width="80px">
+					<div v-for="(value, key, index) in field">
+						<el-form-item :label="field[key]" style="margin-bottom: 0;">
+							<el-checkbox @change="isUpdate" name="type" v-model="showObj[key]">
+								是否展示
+							</el-checkbox>
+						</el-form-item>
+					</div>
+				</el-form>
+			</div> -->
+			<div v-if="confShow" class="main_left">
+				<div>拖拽此列调整位置</div>
+				<el-form ref="form" label-width="80px">
+					<draggable :list="fieldArr" ghost-class="ghost" item-key="id" :sort="true" chosen-class="chosenClass" animation="300"
+						@start="onStart" @end="onEnd">
+						<template #item="{ element }" >
+							<el-form-item :label="element.name"  style="margin-bottom: 0;">
+								<el-checkbox @change="isUpdate" name="type" v-model="showObj[element.field]">
+									是否展示
+								</el-checkbox>
+
+								<el-checkbox @change="isUpdate" name="type" v-model="aRow[element.field]">
+									占一行
+								</el-checkbox>
+							</el-form-item>
+						</template>
+					</draggable>
+				</el-form>
+			</div>
+			<!--<div class="canvas-editor" style="height:1000px;width:1000px;margin:0 auto"></div>-->
+		</div>
+	</div>
+</template>
+<script>
+import Editor, {
+	BlockType,
+	Command,
+	ControlType,
+	EditorMode,
+	EditorZone,
+	ElementType,
+	KeyMap,
+	ListStyle,
+	ListType,
+	PageMode,
+	PaperDirection,
+	RowFlex,
+	TitleLevel
+} from '@hufe921/canvas-editor'
+import axios from 'axios'
+import draggable from "vuedraggable"
+export default {
+	data() {
+		return {
+			fieldArr: [],
+			confShow: true,
+			tableCol: 4,
+			isShow: false,
+			instance: null,
+			tableCellList: [],
+			colIndex: 10,
+			rowIndex: 10,
+			orderData: {},
+			field: {},
+			nameField: {},
+			saveData: {},
+			updateStatus: false,
+			orderList: [],
+			showObj: {},
+			config: {},
+			tableHeight:42,
+			tableWidth:556,
+			aRow:{}
+		}
+	},
+	mounted() {
+		this.login()
+	},
+	methods: {
+		onStart() {
+			console.log("开始拖拽")
+		},
+		onEnd() {
+			//console.log(this.fieldArr)
+			console.log("结束拖拽")
+			this.updateStatus = true
+			this.updateDoc(this.orderList)
+		},
+		isUpdate() {
+			if (this.tableCol == '' || this.tableCol == '0') {
+				return false
+			}
+			this.updateStatus = true
+			this.updateDoc(this.orderList)
+		},
+		updateWord() {
+			const ccc = this.instance.command.getValue()
+			this.updateStatus = true
+			//console.log(this.orderList)
+			this.updateDoc(this.orderList)
+		},
+		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'
+			}
+			axios.post(api, param, { headers: headers }).then(res => {
+				this.getApiField()
+			})
+		},
+		getApiField() {
+			let api = '/api/Administrator/ProductColConfig/getUserConfig'
+			axios.get(api).then(res => {
+				//let field = res.data
+				let fieldArr = res.data.data
+				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
+
+				}
+				this.nameField = nameField
+				this.showObj = showObj
+				this.field = fieldObj
+				this.fieldArr = fieldArr
+				this.getApiData()
+			})
+		},
+		getApiData() {
+			let api = '/api/Administrator/InquiryOrder/getOrderInfo?order_id=E2024060509560254698592'
+			let api2 = '/api/Administrator/OrderFieldStyle/getUserConfig?type=1'
+			const request1 = axios.get(api)
+			const request2 = axios.get(api2)
+			axios.all([request1, request2]).then(axios.spread((response1, response2) => {
+				//.log(response1, response2)
+				let data = response1.data
+				this.orderList = data.data.orderExt.productList
+				let orderData = data.data.orderExt.productList
+				let data2 = response2.data
+				
+				if (data2.code == 1) {
+					this.config = data2.data
+					for (let key in this.showObj) {
+						if (!this.config.hasOwnProperty(key)) {
+							this.showObj[key] = false
+						}
+					}
+					this.sortData(data2.data)
+				}
+				this.updateDoc(orderData)
+			}))
+		},
+		sortData(styleData) {
+			let tempObj = {}
+			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)) {
+					tempArr.push(tempObj[key])
+				}
+			}
+			for(let styleKey in styleData) {
+				tempArr.push(tempObj[styleKey])
+			}
+			this.fieldArr = tempArr
+		},
+		getTest(data) {
+			let nArr = data.split('\n')
+			let saveData = {}
+			for (let i = 0; i < nArr.length; i++) {
+				let item = nArr[i].split(' ').filter(it => it !== '')
+				if (item.length > 2) {
+					item = this.packageItem(item)
+				}
+
+				for (let j = 0; j < item.length; j++) {
+					let itemArr = item[j].split(':')
+					if (this.nameField.hasOwnProperty(itemArr[0])) {
+						saveData[this.nameField[itemArr[0]]] = itemArr[1]
+					}
+				}
+			}
+			this.saveData = saveData
+
+			if (this.updateStatus) {
+				this.updateDoc(saveData)
+			}
+		},
+		updateDoc(orderData) {
+			let _this = this
+			//let width = 553 / this.tableCol
+			let width = _this.tableWidth / _this.tableCol
+			let showData = []
+			let cols = []
+			for (let c = 0; c < _this.tableCol; c++) {
+				let widthItem = { "width": width }
+				cols.push(widthItem)
+			}
+			let tableHeight = parseInt(_this.tableHeight)
+			let table = { "value": "", "type": "table", rowFlex: 'center', "trList": [], "width": _this.tableWidth, "height": 126, "colgroup": [] }
+			table.colgroup = cols
+			let trList = [{ "minHeight": tableHeight, "height": tableHeight, "tdList": [{ 'verticalAlign': 'middle', "colspan": _this.tableCol, "rowspan": 1, "value": [{ "value": "订单详情", "size": 18, 'rowFlex': 'center', bold: 'bolder' }] }] }]
+
+			let tdList = []
+			let ind = 1
+			let len = parseInt(_this.tableCol)
+			let temList = []
+			orderData.forEach(function (item) {
+
+				if (tdList.length > 0) {
+					let temLen = len - tdList.length
+					let obj = _this.fillBlank(len, tdList, temList)
+					trList.push(obj.trListItem1)
+					trList.push(obj.trListItem2)
+					tdList = []
+					temList = []
+					ind += temLen
+				}
+
+				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++){
+					let key = _this.fieldArr[j].field
+					if (!_this.showObj[key]) continue
+
+					let value = {}
+					let temValue = {}
+					if (_this.config.hasOwnProperty(key)) {//
+						let field_style = JSON.parse(JSON.stringify(_this.config[key]['field_style']))
+						//let title = _this.fieldArr[j].name//_this.field[key]
+						field_style.value = _this.fieldArr[j].name
+
+						value = { 'verticalAlign': 'middle', "colspan": 1, "rowspan": 1, "value": [field_style] }
+						let value_style = JSON.parse(JSON.stringify(_this.config[key]['value_style']))
+						//let field_value = item[key]
+						value_style.value = item[key]
+
+						temValue = { 'verticalAlign': 'middle', "colspan": 1, "rowspan": 1, "value": [value_style] }
+					} else {
+						value = { 'verticalAlign': 'middle', "colspan": 1, "rowspan": 1, "value": [{ "value": _this.fieldArr[j].name, "size": 16, 'rowFlex': RowFlex.CENTER }] }
+						temValue = { 'verticalAlign': 'middle', "colspan": 1, "rowspan": 1, "value": [{ "value": item[key], "size": 14, 'rowFlex': RowFlex.CENTER }] }
+					}
+
+					tdList.push(value)
+					temList.push(temValue)
+					if (ind % len == 0) {
+						let trListItem = { "minHeight": tableHeight, "height": tableHeight, "tdList": [] }
+						trListItem.tdList = tdList
+						trList.push(trListItem)
+						tdList = []
+
+						trListItem = { "minHeight": tableHeight, "height": tableHeight, "tdList": [] }
+						for (let index = 0; index < temList.length; index++) {
+							tdList.push(temList[index])
+						}
+						trListItem.tdList = tdList
+						trList.push(trListItem)
+						tdList = []
+						temList = []
+					}
+					ind++
+
+				}
+			})
+
+			if (tdList.length > 0) {
+				let obj = this.fillBlank(len, tdList, temList)
+				trList.push(obj.trListItem1)
+				trList.push(obj.trListItem2)
+			}
+			table.trList = trList
+			showData.push(table)
+			this.init(showData)
+		},
+
+		fillBlank(len, tdList, temList) {
+			let temLen = len - tdList.length
+			let tableHeight = parseInt(this.tableHeight)
+			for (let g = 0; g < temLen; g++) {
+				let value = { "colspan": 1, "rowspan": 1, "value": [{ "value": "", "size": 16 }] }
+				tdList.push(value)
+			}
+			let trListItem1 = { "minHeight": tableHeight, "height": tableHeight, "tdList": [] }
+			trListItem1.tdList = tdList
+			//trList.push(trListItem)
+
+			tdList = []
+			let trListItem2 = { "minHeight": tableHeight, "height": tableHeight, "tdList": [] }
+			for (let index = 0; index < temList.length; index++) {
+				tdList.push(temList[index])
+			}
+			for (let g = 0; g < temLen; g++) {
+				let value = { "colspan": 1, "rowspan": 1, "value": [{ "value": "", "size": 16 }] }
+				tdList.push(value)
+			}
+			trListItem2 = { "minHeight": tableHeight, "height": tableHeight, "tdList": [] }
+			trListItem2.tdList = tdList
+			return { trListItem1: trListItem1, trListItem2: trListItem2 }
+		},
+
+		packageItem(arr) {
+			let k = 0
+			for (let i = 0; i < arr.length; i++) {
+				if (arr[i].split(':').length > 1) {
+					k = i
+
+				} else {
+					arr[k] += arr[i]
+
+				}
+			}
+			return arr.filter(it => it.split(':').length > 1)
+		},
+		getHTMLValuea() {
+			const ccc = this.instance.command.getValue()
+			console.log(ccc)
+			//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()
+			//console.log(ccc)
+			//console.log(this.nameField)
+			let data = ccc.data.main[0].trList
+			let flag = 1
+			let saveData = []
+			let tempFile = []
+			let tempData = {}
+			let isBreak = false
+			for (let i = 0; i < data.length; i++) {
+				if (flag % 2 == 1) {
+					if (data[i].tdList.length > 1) {
+						for (let j = 0; j < data[i].tdList.length; j++) {
+							let name = data[i].tdList[j].value[0].value
+							let style = data[i].tdList[j].value[0]
+							delete style.value
+							if (this.nameField.hasOwnProperty(name)) {
+								let fieldKey = this.nameField[name]
+								if (tempData.hasOwnProperty(fieldKey)) {
+									isBreak = true
+									break
+								}
+								tempData[fieldKey] = { 'field_style': style, 'type': 1, 'field': fieldKey }
+								tempFile.push(fieldKey)
+							}
+						}
+						flag++
+					}
+				} else {
+					if (isBreak) {
+						break
+					}
+					for (let j = 0; j < data[i].tdList.length; j++) {
+						let fieldKey = tempFile[j]
+						if (typeof fieldKey === 'undefined') continue
+						let style = data[i].tdList[j].value[0]
+						delete style.value
+						tempData[fieldKey]['value_style'] = style
+					}
+
+					tempFile = []
+					flag++
+				}
+			}
+			for (let key in tempData) {
+				saveData.push(tempData[key])
+			}
+			console.log(saveData)
+			//return false
+			let api = '/api/Administrator/OrderFieldStyle/save'
+			axios.post(api, saveData).then((res) => {
+
+			})
+
+		},
+		getLen(value) {
+			let arr = value.split('')
+			var regexForNumbers = /^\d+$/;
+
+			// 匹配字母
+			var regexForLetters = /^[A-Za-z]+$/;
+			let count = 0
+			for (let i = 0; i < arr.length; i++) {
+				if (regexForNumbers.test(arr[i]) || regexForLetters.test(arr[i]) || arr[i] == ':' || arr[i] == '.' || arr[i] == ' ') {
+					count++
+				} else {
+					count += 2
+				}
+			}
+			if (count > 40) {
+				count = 40
+			}
+			return count
+
+		},
+		init(showData) {
+			if (this.updateStatus) {
+				this.instance.destroy()
+			}
+
+			this.instance = new Editor(
+				document.querySelector('.editor'),
+				{
+					header: [],
+					main: showData,
+					footer: [
+						{
+							value: 'canvas-editor',
+							size: 12
+						}
+					]
+				},
+				{}
+			)
+		},
+
+		executeUndo() {//撤销
+			this.instance.command.executeUndo()
+		},
+		executeRedo() {//重做 反撤销  
+			this.instance.command.executeRedo()
+		},
+		painterDom() {//格式刷(双击可连续使用)
+			this.instance.command.executePainter({
+				isDblclick: false
+			})
+		},
+		dbPainterDom() {
+			this.instance.command.executePainter({
+				isDblclick: true
+			})
+		},
+		executeFormat() {//清除格式
+			this.instance.command.executeFormat()
+		},
+		executeSizeAdd() {//增大字号
+			this.instance.command.executeSizeAdd()
+		},
+		executeSizeMinus() {//减小字号
+			this.instance.command.executeSizeMinus()
+		},
+		executeBold() {//加粗
+			this.instance.command.executeBold()
+		},
+		executeItalic() {//斜体
+			this.instance.command.executeItalic()
+		},
+		executeUnderline() {//下划线
+			this.instance.command.executeUnderline()
+		},
+		executeUnderline() {
+			this.instance.command.executeUnderline()
+		},
+		executeStrikeout() {
+			this.instance.command.executeStrikeout()
+		},
+		executeSuperscript() {
+			this.instance.command.executeSuperscript()
+		},
+		executeSubscript() {
+			this.instance.command.executeSubscript()
+		},
+		executeTitle(event) {
+			const li = event.target;
+			// 获取元素的属性值
+			const level = li.getAttribute('data-level')
+			this.instance.command.executeTitle(level || null)
+		},
+		rowFlexLeft() {
+			this.instance.command.executeRowFlex(RowFlex.LEFT)
+		},
+		rowFlexCenter() {
+			this.instance.command.executeRowFlex(RowFlex.CENTER)
+		},
+		rowFlexRight() {
+			this.instance.command.executeRowFlex(RowFlex.RIGHT)
+		},
+		rowFlexAlignment() {
+			this.instance.command.executeRowFlex(RowFlex.ALIGNMENT)
+		},
+		clickHandle2() {
+			const fontDom = document.querySelector('.menu-item__font')
+			const fontOptionDom = fontDom.querySelector('.options')
+			fontOptionDom.classList.toggle('visible')
+		},
+		clickHandle3(evt) {
+			if (evt.target && evt.target.matches('li')) {
+				// 获取data-family属性（注意，在JavaScript中不需要使用!来断言非空）
+				const family = evt.target.dataset.family
+				if (family) {
+					// 确保family存在
+					// 假设instance和它的command属性以及executeFont方法都已经被正确定义和初始化
+					this.instance.command.executeFont(family)
+				}
+			}
+		},
+		clickHandle4() {
+			const sizeSetDom = document.querySelector('.menu-item__size')
+			const sizeOptionDom = sizeSetDom.querySelector('.options')
+			sizeOptionDom.classList.toggle('visible')
+		},
+		clickHandle5(evt) {
+			const li = evt.target
+			this.instance.command.executeSize(li.dataset.size)
+		},
+
+		clickHandle7() {
+			const tablePanel = document.querySelector('.table-panel')
+			// 绘制行列
+			console.log('clickHandle7 方法被调用了！')
+			for (let i = 0; i < 10; i++) {
+				const tr = document.createElement('tr')
+				tr.classList.add('table-row')
+				const trCellList = []
+				for (let j = 0; j < 10; j++) {
+					const td = document.createElement('td')
+					td.classList.add('table-cel')
+					tr.append(td)
+					trCellList.push(td)
+				}
+				tablePanel.append(tr)
+
+				this.tableCellList.push(trCellList)
+				this.colIndex = 0
+				this.rowIndex = 0
+			}
+			// 显示表格
+			const elements = document.querySelectorAll('.table-cel')
+			elements.forEach(element => {
+				element.style.width = '4px'
+				element.style.height = '4px'
+				element.style.border = '1px solid #000'
+			})
+			const tablePanelContainer = document.querySelector('.menu-item__table__collapse')
+			tablePanelContainer.style.display = 'block'
+		},
+		// 移除所有格选择
+		removeAllTableCellSelect() {
+			this.tableCellList.forEach(tr => {
+				tr.forEach(td => td.classList.remove('active'))
+			})
+		},
+		// 设置标题内容
+		setTableTitle(payload) {
+			const tableTitle = document.querySelector('.table-select')
+			tableTitle.innerText = payload
+		},
+		// 恢复初始状态
+		recoveryTable() {
+			const tablePanelContainer = document.querySelector('.menu-item__table__collapse')
+			// 还原选择样式、标题、选择行列
+			this.removeAllTableCellSelect()
+			this.setTableTitle('插入')
+			this.colIndex = 0
+			this.rowIndex = 0
+			// 隐藏panel
+			tablePanelContainer.style.display = 'none'
+		},
+
+		ceshi(evt) {
+			const celSize = 16
+			const rowMarginTop = 10
+			const celMarginRight = 6
+			const { offsetX, offsetY } = evt
+			// 移除所有选择
+			this.removeAllTableCellSelect()
+			this.colIndex = Math.ceil(offsetX / (celSize + celMarginRight)) || 1
+			this.rowIndex = Math.ceil(offsetY / (celSize + rowMarginTop)) || 1
+			// 改变选择样式
+			this.tableCellList.forEach((tr, trIndex) => {
+				tr.forEach((td, tdIndex) => {
+					if (tdIndex < this.colIndex && trIndex < this.rowIndex) {
+						td.classList.add('active')
+					}
+				})
+			})
+			// 改变表格标题
+			this.setTableTitle(`${this.rowIndex}×${this.colIndex}`)
+		},
+		tableClose() {
+			this.recoveryTable()
+		},
+		tablePanel() {
+			// 应用选择
+			this.instance.command.executeInsertTable(this.rowIndex, this.colIndex)
+			this.recoveryTable()
+		}
+	}
+}
+</script>
+<style scoped>
+@import url('./components/dialog/dialog.css');
+@import url('./components/signature/signature.css');
+</style>
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'
 	<div class="Cityk-common-layout">
 		<div>
 			<div class="menu" editor-component="menu">
-				<el-button @click="getHTMLValuea">文档数据</el-button>
-				<!-- <el-button @click="updateWord">更新文档</el-button> -->
-				<el-button @click="getHTMLValue">保存样式</el-button>
+				<el-button @click="getHTMLValuea">保存配置</el-button>
+				<el-button @click="getShow">预览</el-button>
+				<el-button @click="changeConfig">切换配置</el-button>
+				<!-- <el-button @click="getHTMLValue">保存样式</el-button> -->
 				<div class="menu-item">
 					<div class="menu-item__undo" @click="executeUndo">
 						<i></i>
@@ -234,9 +235,9 @@ import TheWelcome from './components/TheWelcome.vue'
 						</div>
 						<div class="table-panel" @click="tablePanel" @mousemove="ceshi"></div>
 					</div>
-					<div class="menu-item__image">
+					<div class="menu-item__image" @click="getSelectImage">
 						<i title="图片"></i>
-						<input type="file" id="image" accept=".png, .jpg, .jpeg, .svg, .gif">
+						<input @change="selectImage" type="file" id="image" accept=".png, .jpg, .jpeg, .svg, .gif">
 					</div>
 					<div class="menu-item__hyperlink">
 						<i title="超链接"></i>
@@ -336,12 +337,12 @@ import TheWelcome from './components/TheWelcome.vue'
 							<button>替换</button>
 						</div>
 					</div>
-					<div class="menu-item__print" data-menu="print">
+					<div class="menu-item__print" @click="executePrint" data-menu="print">
 						<i></i>
 					</div>
 				</div>
 			</div>
-			<div class="catalog" editor-component="catalog">
+			<!-- <div class="catalog" editor-component="catalog">
 				<div class="catalog__header">
 					<span>目录</span>
 					<div class="catalog__header__close">
@@ -349,7 +350,7 @@ import TheWelcome from './components/TheWelcome.vue'
 					</div>
 				</div>
 				<div class="catalog__main"></div>
-			</div>
+			</div> -->
 			<div class="editor"></div>
 			<div class="comment" editor-component="comment"></div>
 			<div class="footer" editor-component="footer">
@@ -418,15 +419,6 @@ import TheWelcome from './components/TheWelcome.vue'
 			</div>
 			<div v-if="confShow" class="main_right">
 				<el-form ref="form" label-width="80px">
-					<el-form-item label="表格宽度" style="margin-bottom: 0;">
-						<el-input @input="isUpdate" v-model="tableWidth" size="small"></el-input>
-					</el-form-item>
-					<el-form-item label="表格高度" style="margin-bottom: 0;">
-						<el-input @input="isUpdate" v-model="tableHeight" size="small"></el-input>
-					</el-form-item>
-					<el-form-item label="表格列数" style="margin-bottom: 0;">
-						<el-input @input="isUpdate" v-model="tableCol" size="small"></el-input>
-					</el-form-item>
 					<div v-for="(item, index) in orderList" :key="index">
 						<div>订单信息{{ index }}:</div>
 						<div v-for="(value, key, index) in field">
@@ -441,30 +433,44 @@ import TheWelcome from './components/TheWelcome.vue'
 					</div>
 				</el-form>
 			</div>
-			<!-- <div v-if="confShow" class="main_left">
-				<el-form ref="form" label-width="80px">
+			<div v-if="confShow" class="main_left">
+				<el-form ref="form" label-width="100px">
+					<el-form-item label="" style="margin-bottom: 0;">
+						单击即复制成功
+					</el-form-item>
 					<div v-for="(value, key, index) in field">
-						<el-form-item :label="field[key]" style="margin-bottom: 0;">
-							<el-checkbox @change="isUpdate" name="type" v-model="showObj[key]">
-								是否展示
-							</el-checkbox>
+						<el-form-item :label="field[key]" @click="copy(field[key])" style="margin-bottom: 0;">
+							<span @click.stop="copy('{' + field[key] + '}')">{{ '{' + field[key] + '}' }}</span>
 						</el-form-item>
 					</div>
 				</el-form>
-			</div> -->
-			<div v-if="confShow" class="main_left">
-				<div>拖拽此列调整位置</div>
-				<el-form ref="form" label-width="80px">
-					<draggable :list="fieldArr" ghost-class="ghost" item-key="id" :sort="true" chosen-class="chosenClass" animation="300"
-						@start="onStart" @end="onEnd">
-						<template #item="{ element }" >
-							<el-form-item :label="element.name"  style="margin-bottom: 0;">
-								<el-checkbox @change="isUpdate" name="type" v-model="showObj[element.field]">
-									是否展示
-								</el-checkbox>
-							</el-form-item>
-						</template>
-					</draggable>
+			</div>
+
+
+			<div v-if="confShow" class="main_search_right">
+				<el-form ref="form" label-width="100px">
+					<div v-for="(value, key, index) in searchList" :key="index">
+						<el-form-item v-if="key != 'id'" :label="searchField[key]" style="margin-bottom: 0;">
+							<el-input @input="isUpdate" v-model="searchList[key]" size="small"></el-input>
+						</el-form-item>
+					</div>
+				</el-form>
+			</div>
+			<div v-if="confShow" class="main_search_left">
+				
+    			<!-- <button type="primary" @click="handleGenerate('imgCode', 'dfdfdfdf')">点击生成二维码</button> -->
+				
+				<div ref="myDiv" id="imgCode" style="display:none"></div>
+ 
+				<el-form ref="form" label-width="100px">
+					<el-form-item label="" style="margin-bottom: 0;">
+						单击即复制成功
+					</el-form-item>
+					<div v-for="(value, key, index) in searchField">
+						<el-form-item :label="searchField[key]" @click="copy(searchField[key])" style="margin-bottom: 0;">
+							<span @click.stop="copy('{' + searchField[key] + '}')">{{ '{' + searchField[key] + '}' }}</span>
+						</el-form-item>
+					</div>
 				</el-form>
 			</div>
 			<!--<div class="canvas-editor" style="height:1000px;width:1000px;margin:0 auto"></div>-->
@@ -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;
+}
+