eep_page/src/views/personal_workbench/project/components/BookUnifiedAttr.vue

<template>
  <el-dialog
    title="全文设置"
    :visible="visible"
    width="600px"
    :close-on-click-modal="false"
    class="book-unified-attr"
    @close="dialogClose"
  >
    <div class="setting-top">
      <div class="form">
        <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>
      </div>

      <div class="tips" @click="applyBookUnifiedAttr">
        <p>重置当前教材所有内容</p>
        <p style="color: #f00">(不包含富文本的现有文字属性)</p>
      </div>
    </div>
    <div class="setting-bottom">
      <span>拼音</span>
      <el-switch v-model="unified_attrib.view_pinyin" active-value="true" inactive-value="false" />
      <span>拼音位置</span>
      <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>
    </div>

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

<script>
import { pinyinPositionList, isEnable } from '@/views/book/courseware/data/common';
import { GetBookUnifiedAttrib, ApplyBookUnifiedAttrib, SaveBookUnifiedAttrib } from '@/api/book';
import { unified_attrib } from '@/common/data';

export default {
  name: 'BookUnifiedAttrPage',
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    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(newVal) {
      if (newVal) {
        this.getBookUnifiedAttr();
      }
    },
  },
  methods: {
    getBookUnifiedAttr() {
      GetBookUnifiedAttrib({ book_id: this.bookId }).then(({ content }) => {
        if (content) {
          this.unified_attrib = JSON.parse(content);
        }
      });
    },
    applyBookUnifiedAttr() {
      let loading = this.$loading({ fullscreen: true, text: '正在应用，请稍后...' });
      ApplyBookUnifiedAttrib({
        book_id: this.bookId,
        content: JSON.stringify(this.unified_attrib),
      })
        .then(() => {
          this.$message.success('应用成功');
          this.dialogClose();
        })
        .finally(() => {
          loading.close();
        });
    },
    saveBookUnifiedAttr() {
      SaveBookUnifiedAttrib({
        book_id: this.bookId,
        content: JSON.stringify(this.unified_attrib),
      }).then(() => {
        this.$message.success('保存成功');
        this.dialogClose();
      });
    },
    dialogClose() {
      this.$emit('update:visible', false);
      this.$emit('close');
    },
  },
};
</script>

<style lang="scss" scoped>
.book-unified-attr {
  .setting-top {
    display: flex;

    .form {
      flex: 1;

      .el-input-number {
        width: calc(100% - 42px);
      }

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

        span {
          white-space: nowrap;
        }
      }
    }

    .tips {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 240px;
      font-size: 12px;
      line-height: 1.5;
      text-align: center;
      cursor: pointer;
      background-color: rgba(22, 93, 255, 8%);
      border-radius: 8px;
    }
  }

  .setting-bottom {
    display: flex;
    column-gap: 10px;
    align-items: center;
    padding-top: 20px;
    margin-top: 20px;
    border-top: $border;
  }
}
</style>