Merge branch 'lhd'

src/views/book/courseware/create/components/question/new_word/NewWord.vue

@@ -92,7 +92,7 @@
             />
           </template>
         </el-table-column>
-        <el-table-column fixed="right" label="操作" width="150">
+        <el-table-column label="操作" width="150">
           <template slot-scope="scope">
             <el-button size="mini" type="text" @click="handleDelete(scope.$index)">删除</el-button>
             <el-button size="mini" type="text" @click="moveElement(scope.row, scope.$index, 'up')">上移</el-button>

src/views/book/courseware/create/components/question/notes/Notes.vue

@@ -0,0 +1,116 @@
+<template>
+  <ModuleBase :type="data.type">
+    <template #content>
+      <el-table :data="data.option" border style="width: 100%">
+        <el-table-column fixed prop="number" label="序号" width="70">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.number"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column fixed prop="con" label="内容" width="200">
+          <template slot-scope="scope">
+            <RichText
+              v-model="scope.row.con"
+              :inline="true"
+              toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="interpret" label="翻译" width="200">
+          <template slot-scope="scope">
+            <RichText
+              v-model="scope.row.interpret"
+              :inline="true"
+              toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="note" label="注释">
+          <template slot-scope="scope">
+            <RichText
+              v-model="scope.row.note"
+              :inline="true"
+              toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="150">
+          <template slot-scope="scope">
+            <el-button size="mini" type="text" @click="handleDelete(scope.$index)">删除</el-button>
+            <el-button size="mini" type="text" @click="moveElement(scope.row, scope.$index, 'up')">上移</el-button>
+            <el-button size="mini" type="text" @click="moveElement(scope.row, scope.$index, 'down')">下移</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-button icon="el-icon-plus" style="margin: 24px 0" @click="addElement">增加一个</el-button>
+    </template>
+  </ModuleBase>
+</template>
+
+<script>
+import ModuleMixin from '../../common/ModuleMixin';
+
+import { getNotesData, getOption } from '@/views/book/courseware/data/notes';
+
+export default {
+  name: 'NotesPage',
+  components: {},
+  mixins: [ModuleMixin],
+  data() {
+    return {
+      data: getNotesData(),
+    };
+  },
+  methods: {
+    // 删除行
+    handleDelete(index) {
+      this.data.option.splice(index, 1);
+    },
+    // 上移下移
+    moveElement(dItem, index, type) {
+      let obj = JSON.parse(JSON.stringify(dItem));
+      if (type == 'up' && index > 0) {
+        this.data.option.splice(index - 1, 0, obj);
+        this.data.option.splice(index + 1, 1);
+      }
+      if (type == 'down' && index < this.data.option.length - 1) {
+        this.data.option[index] = this.data.option.splice(index + 1, 1, this.data.option[index])[0];
+      }
+    },
+    // 增加
+    addElement() {
+      this.data.option.push(getOption());
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.upload-file {
+  display: flex;
+  column-gap: 12px;
+  align-items: center;
+  margin: 8px 0;
+
+  .file-name {
+    display: flex;
+    column-gap: 14px;
+    align-items: center;
+    justify-content: space-between;
+    max-width: 360px;
+    padding: 8px 12px;
+    font-size: 14px;
+    color: #1d2129;
+    background-color: #f7f8fa;
+
+    span {
+      display: flex;
+      column-gap: 14px;
+      align-items: center;
+    }
+  }
+
+  .svg-icon {
+    cursor: pointer;
+  }
+}
+</style>

src/views/book/courseware/create/components/question/notes/NotesSetting.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <el-form :model="property" label-width="72px" label-position="left">
+      <SerailNumber :property="property" />
+    </el-form>
+  </div>
+</template>
+
+<script>
+import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
+
+import { getNotesProperty } from '@/views/book/courseware/data/notes';
+
+export default {
+  name: 'NotesSetting',
+  mixins: [SettingMixin],
+  data() {
+    return {
+      property: getNotesProperty(),
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/mixin.scss' as *;
+
+.el-form {
+  @include setting-base;
+}
+</style>

src/views/book/courseware/data/bookType.js

@@ -40,6 +40,8 @@ import Write from '../create/components/question/write/Write.vue';
 import WriteSetting from '../create/components/question/write/WriteSetting.vue';
 import NewWord from '../create/components/question/new_word/NewWord.vue';
 import NewWordSetting from '../create/components/question/new_word/NewWordSetting.vue';
+import Notes from '../create/components/question/notes/Notes.vue';
+import NotesSetting from '../create/components/question/notes/NotesSetting.vue';
 
 import AudioPreview from '@/views/book/courseware/preview/components/audio/AudioPreview.vue';
 import DividerPreview from '@/views/book/courseware/preview/components/divider/DividerPreview.vue';
@@ -62,6 +64,7 @@ import CharacterBasePreview from '../preview/components/character_base/Character
 import CharacterPreview from '../preview/components/character/CharacterPreview.vue';
 import WritePreview from '../preview/components/write/WritePreview.vue';
 import NewWordPreview from '../preview/components/new_word/NewWordPreview.vue';
+import NotesPreview from '../preview/components/notes/NotesPreview.vue';
 
 export const bookTypeOption = [
   {
@@ -228,6 +231,14 @@ export const bookTypeOption = [
         preview: NewWordPreview,
       },
       {
+        value: 'notes',
+        label: '注释组件',
+        icon: '',
+        component: Notes,
+        set: NotesSetting,
+        preview: NotesPreview,
+      },
+      {
         value: 'character',
         label: '汉字组件',
         icon: '',

src/views/book/courseware/data/newWord.js

@@ -80,8 +80,5 @@ export function getNewWordData() {
       url: '',
       file_id: '',
     },
-    answer: {
-      answer_list: [],
-    },
   };
 }

src/views/book/courseware/data/notes.js

@@ -0,0 +1,39 @@
+import {
+  displayList,
+  serialNumberTypeList,
+  serialNumberPositionList,
+  arrangeTypeList,
+  switchOption,
+  isEnable,
+} from '@/views/book/courseware/data/common';
+
+export { arrangeTypeList, switchOption, isEnable };
+
+export function getOption() {
+  return {
+    number:'',
+    con: "",
+    interpret: "", //翻译
+    note: "", //注释
+    img_list: []
+  }
+}
+export function getNotesProperty() {
+  return {
+    serial_number: 1,
+    sn_type: serialNumberTypeList[0].value,
+    sn_position: serialNumberPositionList[0].value,
+    sn_display_mode: displayList[0].value,
+  };
+}
+
+export function getNotesData() {
+  return {
+    type: 'notes',
+    title: '注释组件',
+    property: getNotesProperty(),
+    option: [
+      getOption()
+    ],
+  };
+}

src/views/book/courseware/preview/components/notes/NotesPreview.vue

@@ -0,0 +1,104 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <div class="select-preview" :style="getAreaStyle()">
+    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
+
+    <div class="main">预览开发中</div>
+  </div>
+</template>
+
+<script>
+import { getNotesData } from '@/views/book/courseware/data/notes';
+
+import PreviewMixin from '../common/PreviewMixin';
+
+export default {
+  name: 'NotesPreview',
+  components: {},
+  mixins: [PreviewMixin],
+  data() {
+    return {
+      data: getNotesData(),
+    };
+  },
+  computed: {},
+  created() {
+    // this.answer.answer_list = this.data.model_essay
+    //   .map((item) => {
+    //     return item
+    //       .map(({ type, content, mark }) => {
+    //         if (type === 'input') {
+    //           return {
+    //             value: content,
+    //             mark,
+    //           };
+    //         }
+    //       })
+    //       .filter((item) => item);
+    //   })
+    //   .flat();
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/mixin.scss' as *;
+
+.select-preview {
+  @include preview-base;
+
+  .main {
+    display: grid;
+    align-items: center;
+  }
+
+  .fill-wrapper {
+    grid-area: fill;
+    font-size: 16pt;
+
+    p {
+      margin: 0;
+    }
+
+    .el-input {
+      display: inline-flex;
+      align-items: center;
+      width: 120px;
+      margin: 0 2px;
+
+      &.pinyin :deep input.el-input__inner {
+        font-family: 'PINYIN-B', sans-serif;
+      }
+
+      &.chinese :deep input.el-input__inner {
+        font-family: 'arial', sans-serif;
+      }
+
+      &.english :deep input.el-input__inner {
+        font-family: 'arial', sans-serif;
+      }
+
+      :deep input.el-input__inner {
+        padding: 0;
+        font-size: 16pt;
+        color: $font-color;
+        text-align: center;
+        background-color: #fff;
+        border-width: 0;
+        border-bottom: 1px solid $font-color;
+        border-radius: 0;
+      }
+    }
+  }
+
+  .record-box {
+    padding: 6px 12px;
+    background-color: $fill-color;
+
+    :deep .record-time {
+      width: 100px;
+    }
+  }
+}
+</style>