提交

src/components/editor.vue

@@ -1,9 +1,9 @@
 <template>
-  <div contenteditable ref="editor" class="text" @input="input"></div>
+  <div contenteditable ref="editor" v-html="rawText" class="text" @input="input"></div>
 </template>
 <script>
 import '@wangeditor/editor/dist/css/style.css'; // 引入 css
-import { ref, onMounted } from 'vue';
+// import { ref, onMounted } from 'vue';
 export default {
   props: {
     rawText: {
@@ -11,21 +11,7 @@ export default {
       default: '',
     },
   },
-  watch: {
-    rawText(t) {
-      if (this.editor.innerHTML === t) return;
-      this.editor.innerHTML = t;
-    },
-  },
-  setup(props) {
-    const editor = ref(null);
-    onMounted(() => {
-      editor.value.innerHTML = props.rawText;
-    });
-    return {
-      editor,
-    };
-  },
+  setup() {},
   methods: {
     input(e) {
       this.$emit('update:rawText', e.target.innerHTML);

src/view/allMedia/components/proofread_errors.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="errorList">
+    <div v-for="(item, index) in list || []" :key="index">
+      <template v-for="(v, i) in item.htmlWords" :key="'son' + i">
+        <div v-if="tabSelect[item.um_error_level - 1]">
+          <div
+            class="searchEnd"
+            :style="{
+              borderColor: getTypeError(item.um_error_level, 'rgb'),
+              backgroundColor:
+                lastAtom === item.colorPosition
+                  ? getTypeError(item.um_error_level, 'rgba')
+                  : '',
+            }"
+            @click.stop="() => changeselect(item)"
+          >
+            <el-row :gutter="32">
+              <el-col :span="12">
+                <p
+                  v-text="v.word"
+                  :style="{
+                    color: getTypeError(item.um_error_level, 'rgb'),
+                  }"
+                ></p>
+              </el-col>
+              <el-col :span="12">
+                <p
+                  v-text="item.suggest[i]"
+                  style="color: #2dc76d; text-align: right"
+                ></p>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <p style="line-height: 1.5em">
+                  错误原因：{{ item.youmeiWordName }}
+                </p>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <p style="line-height: 1.5em">修改建议：{{ item.explanation }}</p>
+              </el-col>
+            </el-row>
+
+            <p style="text-align: right">
+              <span
+                class="btn"
+                v-if="listName == 'untreatedError' && item.suggest[i]"
+                @click.stop="() => replaceText(item, i, index)"
+              >
+                替换
+              </span>
+              <span
+                class="btn"
+                v-if="
+                  listName == 'untreatedError' &&
+                  !item.suggest[i] &&
+                  isDel(item.type.belongId)
+                "
+                @click.stop="() => deleteItem(item, i, index)"
+              >
+                删除
+              </span>
+              <span
+                class="btn"
+                v-if="listName == 'untreatedError'"
+                @click.stop="() => ignoreText(item, i, index)"
+              >
+                忽略
+              </span>
+              <span
+                class="btn"
+                v-if="listName !== 'untreatedError'"
+                @click.stop="() => resumeText(item, i, index)"
+              >
+                恢复
+              </span>
+            </p>
+          </div>
+        </div>
+      </template>
+    </div>
+    <el-empty description="所选类型下暂无信息" v-if="!list || !list.length" />
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import errType from '../../../../config/errtype';
+const props = defineProps({
+  list: Array,
+  lastAtom: Number,
+  listName: String,
+  tabSelect: Array,
+});
+const emit = defineEmits([
+  'selectErrorFunc',
+  'replaceText',
+  'ignoreText',
+  'deleteText',
+  'resumeText',
+]);
+
+function isDel(id) {
+  const Del = {
+    105: true,
+    108: true,
+    112: true,
+    111: true,
+    201: true,
+  };
+  return Del[id];
+}
+
+function getTypeError(key, type) {
+  if (type == 'rgb') return type + '(' + errType[key] + ')';
+  if (type == 'rgba') return type + '(' + errType[key] + ', 0.1)';
+  return '';
+}
+
+function changeselect(item) {
+  emit('selectErrorFunc', {
+    colorPosition: item.colorPosition,
+    um_error_level: item.um_error_level,
+  });
+}
+
+function replaceText(item, index, pindex) {
+  emit('replaceText', {
+    item,
+    index,
+    pindex,
+    name: props.listName,
+  });
+}
+
+function ignoreText(item, index, pindex) {
+  emit('ignoreText', {
+    item,
+    index,
+    pindex,
+    name: props.listName,
+  });
+}
+
+function deleteItem(item, index, pindex) {
+  emit('deleteText', {
+    item,
+    index,
+    pindex,
+    name: props.listName,
+  });
+}
+
+function resumeText(item, index, pindex) {
+  emit('resumeText', {
+    item,
+    index,
+    pindex,
+    name: props.listName,
+  });
+}
+</script>
+
+<style scoped>
+.errorList {
+  padding: 0 5px;
+}
+.searchEnd {
+  border: 1px solid;
+  border-top: 4px solid;
+  margin-bottom: 1em;
+  padding: 5px 35px;
+  font-size: 14px;
+  line-height: 1.5em;
+}
+.btn {
+  display: inline-block;
+  background: rgba(41, 116, 255, 0.1);
+  color: #2974ff;
+  padding: 3px 15px;
+  height: 1.5em;
+  line-height: 1.5em;
+  margin-left: 0.3em;
+  cursor: pointer;
+}
+.wenhao {
+  display: inline-block;
+  border: 1px solid #5e5e5e;
+  border-radius: 50%;
+  width: 1.2em;
+  height: 1.2em;
+  line-height: 1.2em;
+  text-align: center;
+  color: #5e5e5e;
+}
+
+.change {
+  float: right;
+  margin-right: -32px;
+  cursor: pointer;
+}
+</style>