neicanCMS/src/view/allMedia/components/proofread_errors.vue

<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;
  overflow-y: auto;
  height: calc(100vh - 256px);
}
.searchEnd {
  border-left: 6px solid;
  margin-bottom: 1em;
  padding: 5px 35px 5px 15px;
  font-size: 16px;
  line-height: 1.5em;
  background-color: #f9fafc;
}
.btn {
  display: inline-block;
  background: rgba(41, 116, 255, 0.1);
  color: #2974ff;
  padding: 0 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>