富茂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.
 
 
 

62 lines
2.0 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. disabled></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. disabled></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-form>
  38. </div>
  39. </template>
  40. <script>
  41. export default {
  42. computed: {
  43. pageInfo() {
  44. return this.$vptd.state.page
  45. },
  46. },
  47. methods: {
  48. // 宽度与高度的比例必须约等于纸张宽度与纸张高度的比例,否则拖拽组件将错位
  49. shapeChanged(element) {
  50. if (element === "pageWidth") {
  51. this.pageInfo.width = this.pageInfo.pageWidth * 2
  52. } else if (element === "pageHeight") {
  53. this.pageInfo.height = this.pageInfo.pageHeight * 2
  54. }
  55. }
  56. }
  57. }
  58. </script>