eep_page/src/views/book/courseware/create/components/FullTextSettings.vue

<template>
  <el-dialog
    custom-class="full-text-settings"
    width="400px"
    :close-on-click-modal="false"
    :visible="visible"
    :before-close="handleClose"
    title="样式调整"
  >
    <el-form ref="form" :model="unified_attrib" label-width="80px" size="small">
      <el-form-item label="主题色">
        <div class="color-group">
          <el-color-picker v-model="unified_attrib.topic_color" />
          <span>辅助色</span>
          <el-color-picker v-model="unified_attrib.assist_color" />
        </div>
      </el-form-item>
      <el-form-item label="字体">
        <el-select v-model="unified_attrib.font" placeholder="请选择字体">
          <el-option label="楷体" value="楷体,微软雅黑" />
          <el-option label="黑体" value="黑体,微软雅黑" />
          <el-option label="宋体" value="宋体,微软雅黑" />
          <el-option label="Arial" value="Arial,Helvetica,sans-serif" />
          <el-option label="Times New Roman" value="Times New Roman,times,serif" />
          <el-option label="拼音" value="League" />
        </el-select>
      </el-form-item>
      <el-form-item label="字号">
        <el-select v-model="unified_attrib.font_size" placeholder="请选择字号">
          <el-option v-for="size in fontSizeList" :key="size" :label="size" :value="size" />
        </el-select>
      </el-form-item>
      <el-form-item label="拼音字号">
        <el-select v-model="unified_attrib.pinyin_size" placeholder="请选择拼音字号">
          <el-option v-for="size in fontSizeList" :key="size" :label="size" :value="size" />
        </el-select>
      </el-form-item>
      <el-form-item label="行距">
        <el-input-number v-model="unified_attrib.line_height" :min="0" :max="20" :step="0.1" />
      </el-form-item>
      <el-form-item label="文字颜色">
        <el-color-picker v-model="unified_attrib.text_color" />
      </el-form-item>
      <el-form-item label="对齐方式">
        <el-select v-model="unified_attrib.align" placeholder="请选择对齐方式">
          <el-option label="左对齐" value="LEFT" />
          <el-option label="居中" value="MIDDLE" />
          <el-option label="右对齐" value="RIGHT" />
        </el-select>
      </el-form-item>
      <el-form-item label="拼音">
        <el-switch v-model="unified_attrib.view_pinyin" active-value="true" inactive-value="false" />
      </el-form-item>
      <el-form-item label="拼音位置">
        <el-radio-group v-model="unified_attrib.pinyin_position" :disabled="!isEnable(unified_attrib.view_pinyin)">
          <el-radio v-for="{ value, label } in pinyinPositionList" :key="value" :label="value">
            {{ label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { pinyinPositionList, isEnable } from '@/views/book/courseware/data/common';

import { GetBookUnifiedAttrib } from '@/api/book';
import { unified_attrib } from '@/common/data';

export default {
  name: 'FullTextSettings',
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    settings: {
      type: Object,
      default: () => unified_attrib,
    },
    bookId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      unified_attrib,
      fontSizeList: [
        '8pt',
        '10pt',
        '12pt',
        '14pt',
        '16pt',
        '18pt',
        '20pt',
        '22pt',
        '24pt',
        '26pt',
        '28pt',
        '30pt',
        '32pt',
        '34pt',
        '36pt',
      ],
      pinyinPositionList,
      isEnable,
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.$set(this, 'unified_attrib', { ...this.unified_attrib, ...this.settings });
      }
    },
  },
  created() {
    this.getBookUnifiedAttr();
  },
  methods: {
    getBookUnifiedAttr() {
      GetBookUnifiedAttrib({ book_id: this.bookId }).then(({ content }) => {
        if (content && (this.settings === null || Object.keys(this.settings).length <= 0)) {
          this.unified_attrib = JSON.parse(content);
        }
      });
    },
    handleClose() {
      this.$emit('update:visible', false);
    },
    confirm() {
      this.$emit('update:visible', false);
      this.$emit('fullTextSettings', this.unified_attrib);
    },
  },
};
</script>

<style lang="scss" scoped>
.full-text-settings {
  padding: 0;

  .el-form {
    .color-group {
      display: flex;
      column-gap: 10px;
      align-items: center;

      span {
        white-space: nowrap;
      }
    }
  }
}
</style>