富茂A端打印模板内嵌编辑器
Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
 
 
 

74 righe
2.7 KiB

  1. <template>
  2. <div>
  3. <el-form label-width="80px" :model="pageInfo" size="mini" class="kr-form">
  4. <el-row>
  5. <el-form-item label="模板名称">
  6. <el-input v-model="pageInfo.title" class="full-w"></el-input>
  7. </el-form-item>
  8. </el-row>
  9. <el-row>
  10. <el-col :span="12">
  11. <el-form-item label="模板宽度">
  12. <el-input-number v-model="pageInfo.width" controls-position="right" :min="0" class="min-input"
  13. @input="shapeChanged('width')"></el-input-number>
  14. </el-form-item>
  15. </el-col>
  16. <el-col :span="12">
  17. <el-form-item label="模板高度">
  18. <el-input-number v-model="pageInfo.height" controls-position="right" :min="0" class="min-input"
  19. @input="shapeChanged('height')"></el-input-number>
  20. </el-form-item>
  21. </el-col>
  22. </el-row>
  23. <el-row>
  24. <el-form-item label="纸张宽度">
  25. <el-input-number v-model="pageInfo.pageWidth" controls-position="right" :min="0" class="min-input"
  26. @input="shapeChanged('pageWidth')"></el-input-number>
  27. <span class="unit-text">(mm)</span>
  28. </el-form-item>
  29. </el-row>
  30. <el-row>
  31. <el-form-item label="纸张高度">
  32. <el-input-number v-model="pageInfo.pageHeight" controls-position="right" :min="0" class="min-input"
  33. @input="shapeChanged('pageHeight')"></el-input-number>
  34. <span class="unit-text">(mm)</span>
  35. </el-form-item>
  36. </el-row>
  37. <el-row>
  38. <div style="padding:0 12px;">
  39. 注:模板宽度与模板高度的比例将自动同步为纸张宽度与纸张高度的比例
  40. </div>
  41. </el-row>
  42. </el-form>
  43. </div>
  44. </template>
  45. <script>
  46. export default {
  47. computed: {
  48. pageInfo() {
  49. return this.$vptd.state.page
  50. },
  51. },
  52. methods: {
  53. // 宽度与高度的比例必须约等于纸张宽度与纸张高度的比例,否则拖拽组件将错位
  54. shapeChanged(element) {
  55. if (element === "width") {
  56. const proportion = this.pageInfo.width / this.pageInfo.height
  57. this.pageInfo.pageWidth = Math.ceil(proportion * this.pageInfo.pageHeight)
  58. } else if (element === "height") {
  59. const proportion = this.pageInfo.height / this.pageInfo.width
  60. this.pageInfo.pageHeight = Math.ceil(proportion * this.pageInfo.pageWidth)
  61. } else if (element === "pageWidth") {
  62. const proportion = this.pageInfo.pageWidth / this.pageInfo.pageHeight
  63. this.pageInfo.width = Math.ceil(proportion * this.pageInfo.height)
  64. } else if (element === "pageHeight") {
  65. const proportion = this.pageInfo.pageHeight / this.pageInfo.pageWidth
  66. this.pageInfo.height = Math.ceil(proportion * this.pageInfo.width)
  67. }
  68. }
  69. }
  70. }
  71. </script>