123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121 |
- <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>
- <style lang="scss">
- .tox .tox-editor-header {
- z-index: 3 !important;
- }
- </style>
|