eep_page/src/views/book/courseware/create/components/question/input/Input.vue

<template>
  <ModuleBase :type="data.type">
    <template #content>
      <RichText
        ref="rich"
        v-model="data.content"
        toolbar="fontselect fontsizeselect alignleft aligncenter alignright forecolor backcolor"
        :font-size="18"
        placeholder="请输入内容"
      />

      <el-button class="btn" @click="openMultilingual">多语言</el-button>
      <MultilingualFill
        :visible.sync="multilingualVisible"
        :text="data.content"
        :translations="data.multilingual"
        @SubmitTranslation="handleMultilingualTranslation"
      />
    </template>
  </ModuleBase>
</template>

<script>
import ModuleMixin from '../../common/ModuleMixin';

import { getInputData, modelList, inputStyleList } from '@/views/book/courseware/data/input';

export default {
  name: 'InputPage',
  mixins: [ModuleMixin],
  data() {
    return {
      data: getInputData(),
    };
  },
  watch: {
    'data.property.model': 'handleMindMap',
    'data.property.input_style': 'handleMindMap',
  },
  methods: {
    /**
     * @description 更新思维导图数据
     */
    handleMindMap() {
      const modelLabel = modelList.find((item) => item.value === this.data.property.model)?.label || '';
      const inputStyleLabel = this.data.property.input_style === inputStyleList[0].value ? '横线' : '';
      this.data.mind_map.node_list = [
        {
          name: `${modelLabel}${inputStyleLabel}输入框组件`,
        },
      ];
    },
    handleMultilingualTranslation(translations) {
      this.data.multilingual = translations;
    },
  },
};
</script>

<style lang="scss" scoped>
.btn {
  margin-top: 12px;
}
</style>