Notes.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <template>
  2. <ModuleBase :type="data.type">
  3. <template #content>
  4. <el-table :data="data.option" border style="width: 100%">
  5. <el-table-column fixed prop="number" label="序号" width="70">
  6. <template slot-scope="scope">
  7. <el-input v-model="scope.row.number"></el-input>
  8. </template>
  9. </el-table-column>
  10. <el-table-column fixed prop="con" label="内容" width="200">
  11. <template slot-scope="scope">
  12. <RichText
  13. v-model="scope.row.con"
  14. :inline="true"
  15. toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
  16. />
  17. </template>
  18. </el-table-column>
  19. <el-table-column prop="interpret" label="翻译" width="200">
  20. <template slot-scope="scope">
  21. <RichText
  22. v-model="scope.row.interpret"
  23. :inline="true"
  24. toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
  25. />
  26. </template>
  27. </el-table-column>
  28. <el-table-column prop="note" label="注释">
  29. <template slot-scope="scope">
  30. <RichText
  31. v-model="scope.row.note"
  32. :inline="true"
  33. toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
  34. />
  35. </template>
  36. </el-table-column>
  37. <el-table-column label="操作" width="150">
  38. <template slot-scope="scope">
  39. <el-button size="mini" type="text" @click="handleDelete(scope.$index)">删除</el-button>
  40. <el-button size="mini" type="text" @click="moveElement(scope.row, scope.$index, 'up')">上移</el-button>
  41. <el-button size="mini" type="text" @click="moveElement(scope.row, scope.$index, 'down')">下移</el-button>
  42. </template>
  43. </el-table-column>
  44. </el-table>
  45. <el-button icon="el-icon-plus" style="margin: 24px 0" @click="addElement">增加一个</el-button>
  46. </template>
  47. </ModuleBase>
  48. </template>
  49. <script>
  50. import ModuleMixin from '../../common/ModuleMixin';
  51. import { getNotesData, getOption } from '@/views/book/courseware/data/notes';
  52. export default {
  53. name: 'NotesPage',
  54. components: {},
  55. mixins: [ModuleMixin],
  56. data() {
  57. return {
  58. data: getNotesData(),
  59. };
  60. },
  61. methods: {
  62. // 删除行
  63. handleDelete(index) {
  64. this.data.option.splice(index, 1);
  65. },
  66. // 上移下移
  67. moveElement(dItem, index, type) {
  68. let obj = JSON.parse(JSON.stringify(dItem));
  69. if (type == 'up' && index > 0) {
  70. this.data.option.splice(index - 1, 0, obj);
  71. this.data.option.splice(index + 1, 1);
  72. }
  73. if (type == 'down' && index < this.data.option.length - 1) {
  74. this.data.option[index] = this.data.option.splice(index + 1, 1, this.data.option[index])[0];
  75. }
  76. },
  77. // 增加
  78. addElement() {
  79. this.data.option.push(getOption());
  80. },
  81. },
  82. };
  83. </script>
  84. <style lang="scss" scoped>
  85. .upload-file {
  86. display: flex;
  87. column-gap: 12px;
  88. align-items: center;
  89. margin: 8px 0;
  90. .file-name {
  91. display: flex;
  92. column-gap: 14px;
  93. align-items: center;
  94. justify-content: space-between;
  95. max-width: 360px;
  96. padding: 8px 12px;
  97. font-size: 14px;
  98. color: #1d2129;
  99. background-color: #f7f8fa;
  100. span {
  101. display: flex;
  102. column-gap: 14px;
  103. align-items: center;
  104. }
  105. }
  106. .svg-icon {
  107. cursor: pointer;
  108. }
  109. }
  110. </style>
  111. <style lang="scss">
  112. .tox .tox-editor-header {
  113. z-index: 3 !important;
  114. }
  115. </style>