富茂A端打印模板内嵌编辑器
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

97 lines
2.4 KiB

  1. <template>
  2. <kr-print-designer ref="printDesigner" :temp-value="value" :widget-options="widgets" @save="handleSave" />
  3. </template>
  4. <script>
  5. // import { OutStockOptions, InStockOptions } from '../data/options'
  6. const baseUrl = process.env.VUE_APP_BASE_API;
  7. export default {
  8. data() {
  9. return {
  10. tenantId: '',
  11. printData: [],
  12. value: {
  13. title: 'demo',
  14. width: 750,
  15. height: 550,
  16. pageWidth: 750,
  17. pageHeight: 550,
  18. tempItems: [],
  19. },
  20. widgets: [],
  21. }
  22. },
  23. methods: {
  24. handleSave(data) {
  25. const obj = {
  26. id: data.id,
  27. tenantId: this.tenantId,
  28. type: data.type,
  29. title: data.title,
  30. width: data.width,
  31. height: data.height,
  32. pageWidth: data.pageWidth,
  33. pageHeight: data.pageHeight,
  34. tempItems: data.tempItems,
  35. }
  36. console.log(obj, 'handleSave')
  37. this.addNewModel(obj)
  38. },
  39. // 手动初始话模板数据
  40. initTemp() {
  41. this.$refs.printDesigner.initTemp(this.value, this.widgets)
  42. },
  43. addNewModel(data) {
  44. this.$axios.post(baseUrl + "/print/saveTemplates", data)
  45. .then(res => {
  46. console.log(res, 'res')
  47. if (res.data.code == 200) {
  48. this.$message.success("新增成功!")
  49. this.$router.back()
  50. } else {
  51. this.$message.error("新增失败!")
  52. }
  53. })
  54. .catch(err => {
  55. console.error(err);
  56. this.$message.error("新增失败!")
  57. });
  58. },
  59. getWidgets() {
  60. const url = baseUrl + "/print/printDatas?type=2"
  61. this.$axios.get(url)
  62. .then(res => {
  63. console.log(res, 'res')
  64. const arr = []
  65. res.data.data.forEach(item => {
  66. delete item.printComponents.defaultValue
  67. arr.push(item.printComponents)
  68. });
  69. this.widgets = arr
  70. console.log(this.widgets, 'this.widgets ')
  71. //传入值变化后,需要手动初始化模板数据,否则不会同步
  72. this.initTemp()
  73. })
  74. .catch(err => {
  75. console.error(err);
  76. });
  77. }
  78. },
  79. created() {
  80. this.printData = this.$route.query.printData
  81. this.tenantId = this.$route.query.tenantId
  82. try {
  83. this.value = this.printData
  84. this.getWidgets(this.value.type)
  85. } catch (err) {
  86. console.error(err)
  87. }
  88. },
  89. }
  90. </script>