|
|
@@ -0,0 +1,362 @@
|
|
|
+<template>
|
|
|
+ <div class="check-article">
|
|
|
+ <div class="main">
|
|
|
+ <div v-for="(item, index) in data.detail" :key="index + 'paragraph'" class="paragraph">
|
|
|
+ <label>段 {{ index + 1 }}</label>
|
|
|
+ <template v-if="data.type === 'article'">
|
|
|
+ <el-upload
|
|
|
+ action="no"
|
|
|
+ accept="image/*,video/*"
|
|
|
+ :file-list="item.sourceList"
|
|
|
+ :http-request="handleImage"
|
|
|
+ :before-upload="handleBeforeImage"
|
|
|
+ :on-exceed="handleExceed"
|
|
|
+ :limit="1"
|
|
|
+ :key="index"
|
|
|
+ @click.native="handleItem(index)"
|
|
|
+ class="upload-resource"
|
|
|
+ >
|
|
|
+ <div class="remark-box"><i class="el-icon-upload"></i>上传图片/视频</div>
|
|
|
+ </el-upload>
|
|
|
+ <div class="set-para">
|
|
|
+ <span>图片/视频位置：</span>
|
|
|
+ <el-radio-group v-model="item.sourcePosition">
|
|
|
+ <el-radio label="before">段落前</el-radio>
|
|
|
+ <el-radio label="after">段落后</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ <div class="set-para">
|
|
|
+ <span class="adult-book-lable">图片宽度：</span>
|
|
|
+ <el-input
|
|
|
+ v-model="item.widthNumber"
|
|
|
+ class="adult-book-input"
|
|
|
+ placeholder="请输入宽度值"
|
|
|
+ maxlength="200"
|
|
|
+ style="width: 150px"
|
|
|
+ @blur="onBlur(item, 'widthNumber')"
|
|
|
+ />
|
|
|
+ <span class="adult-book-lable">图片高度：</span>
|
|
|
+ <el-input
|
|
|
+ v-model="item.heightNumber"
|
|
|
+ class="adult-book-input"
|
|
|
+ placeholder="请输入高度值"
|
|
|
+ maxlength="200"
|
|
|
+ style="width: 150px"
|
|
|
+ @blur="onBlur(item, 'heightNumber')"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div v-for="(items, indexs) in item.wordsList" :key="indexs + 'words'" class="sentence-box">
|
|
|
+ <div class="sentence">
|
|
|
+ <b>{{ indexs + 1 }}.</b>
|
|
|
+ <div class="sentence">
|
|
|
+ <span v-for="(itemss, indexss) in items" :key="indexss" class="sentence-item" @click="showPic(itemss)">
|
|
|
+ {{ itemss.chs }}
|
|
|
+ <img
|
|
|
+ v-if="itemss.img && itemss.img.length > 0"
|
|
|
+ style="height: 16px"
|
|
|
+ :src="itemss.img[0].file_url_open"
|
|
|
+ />
|
|
|
+ <div :contenteditable="true" class="sentence-pic"></div>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-dialog title="上传图片" :visible.sync="remarkVisible" width="50%" :close-on-click-modal="false" append-to-body>
|
|
|
+ <template v-if="itemActive">
|
|
|
+ <el-upload
|
|
|
+ action="no"
|
|
|
+ accept="image/*,video/*"
|
|
|
+ :file-list="itemActive.img"
|
|
|
+ :http-request="handleImages"
|
|
|
+ :before-upload="handleBeforeImages"
|
|
|
+ :on-exceed="handleExceeds"
|
|
|
+ :limit="1"
|
|
|
+ class="upload-resource"
|
|
|
+ >
|
|
|
+ <div class="remark-box"><i class="el-icon-upload"></i>上传图片</div>
|
|
|
+ </el-upload>
|
|
|
+ </template>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="remarkVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="remarkVisible = false">保 存</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { fileUpload } from '@/api/app';
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ props: ['data'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // ArticelData: JSON.parse(JSON.stringify(this.data)),
|
|
|
+ showWordFlag: false,
|
|
|
+ showPinyinFlag: false,
|
|
|
+ showStyleFlag: false,
|
|
|
+ remarkVisible: false,
|
|
|
+ remark: null,
|
|
|
+ activeItem: null,
|
|
|
+ itemActive: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {
|
|
|
+ this.getArticleData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取分析结果
|
|
|
+ getArticleData() {
|
|
|
+ this.data.detail.forEach((item) => {
|
|
|
+ if (item.segList && item.segList.length > 0) {
|
|
|
+ item.sentenceStr = [];
|
|
|
+ item.segList.forEach((items, indexs) => {
|
|
|
+ let str = '';
|
|
|
+ items.forEach((itemss, indexss) => {
|
|
|
+ str += itemss;
|
|
|
+
|
|
|
+ if (indexss !== items.length - 1) str += ' ';
|
|
|
+ });
|
|
|
+ item.sentenceStr.push(str);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ changeImage(file) {
|
|
|
+ fileUpload('Mid', file, { isGlobalprogress: true }).then(({ file_info_list }) => {
|
|
|
+ if (file_info_list.length > 0) {
|
|
|
+ const { file_id, file_url_open, file_name } = file_info_list[0];
|
|
|
+ this.remark.img_list.push({
|
|
|
+ name: file_name,
|
|
|
+ url: file_url_open,
|
|
|
+ id: file_id,
|
|
|
+ imgNumber: 0,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ delImage(index) {
|
|
|
+ this.remark.img_list.splice(index, 1);
|
|
|
+ },
|
|
|
+ onBlur(item, field) {
|
|
|
+ item[field] = item[field] ? item[field].trim() : '';
|
|
|
+ },
|
|
|
+ // 处理超出图片个数操作
|
|
|
+ handleExceed(files, fileList) {
|
|
|
+ this.$message.warning(
|
|
|
+ `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`,
|
|
|
+ );
|
|
|
+ },
|
|
|
+ // 记录段落
|
|
|
+ handleItem(index) {
|
|
|
+ this.activeItem = this.data.detail[index];
|
|
|
+ },
|
|
|
+ // 图片上传前处理
|
|
|
+ handleBeforeImage(file) {
|
|
|
+ // 判断文件是否为图片
|
|
|
+ if (!file.type.includes('image') && !file.type.includes('video')) {
|
|
|
+ this.$message.error('请选择图片或视频文件');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 图片上传
|
|
|
+ handleImage(file) {
|
|
|
+ fileUpload('Mid', file, { isGlobalprogress: true }).then(({ file_info_list }) => {
|
|
|
+ if (file_info_list.length > 0) {
|
|
|
+ this.activeItem.sourceList = file_info_list;
|
|
|
+ this.activeItem.sourceList[0].name = file_info_list[0].file_name;
|
|
|
+ this.activeItem.sourceList[0].type = file.file.type.includes('image') > -1 ? 'image' : 'video';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 处理超出图片个数操作
|
|
|
+ handleExceeds(files, fileList) {
|
|
|
+ this.$message.warning(
|
|
|
+ `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`,
|
|
|
+ );
|
|
|
+ },
|
|
|
+ // 图片上传前处理
|
|
|
+ handleBeforeImages(file) {
|
|
|
+ // 判断文件是否为图片
|
|
|
+ if (!file.type.includes('image')) {
|
|
|
+ this.$message.error('请选择图片文件');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 图片上传
|
|
|
+ handleImages(file) {
|
|
|
+ fileUpload('Mid', file, { isGlobalprogress: true }).then(({ file_info_list }) => {
|
|
|
+ if (file_info_list.length > 0) {
|
|
|
+ this.itemActive.img = file_info_list;
|
|
|
+ this.itemActive.img[0].name = file_info_list[0].file_name;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ showPic(item) {
|
|
|
+ this.itemActive = item;
|
|
|
+ this.remarkVisible = true;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.check-article {
|
|
|
+ min-height: 100%;
|
|
|
+ background: #f6f6f6;
|
|
|
+
|
|
|
+ .wheader {
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main {
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ &-top {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-bottom: 24px;
|
|
|
+
|
|
|
+ b {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 50%;
|
|
|
+ width: 50px;
|
|
|
+ margin-left: -25px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 34px;
|
|
|
+ color: #000;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ padding: 5px 16px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #165dff;
|
|
|
+ border: 1px solid #165dff;
|
|
|
+ border-radius: 2px;
|
|
|
+
|
|
|
+ &.el-button--primary {
|
|
|
+ color: #fff;
|
|
|
+ background: #165dff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .go-back {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 60px;
|
|
|
+ padding: 5px 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #333;
|
|
|
+ cursor: pointer;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #d9d9d9;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: 0 2px 0 0 rgba(0, 0, 0, 2%);
|
|
|
+
|
|
|
+ .el-icon-arrow-left {
|
|
|
+ margin-right: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .paragraph {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ > label {
|
|
|
+ padding: 1px 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ color: var(--blue-05, #175dff);
|
|
|
+ background: #e7eeff;
|
|
|
+ border: 1px solid #175dff;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sentence-box {
|
|
|
+ .sentence {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 8px;
|
|
|
+
|
|
|
+ b {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 32px;
|
|
|
+ margin-top: 16px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sentence {
|
|
|
+ flex: 1;
|
|
|
+ padding: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #000;
|
|
|
+ text-align: left;
|
|
|
+ background: #f7f7f7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .set-para {
|
|
|
+ margin-top: 8px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.remark-box {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: fit-content;
|
|
|
+ height: 24px;
|
|
|
+ padding: 2px 12px;
|
|
|
+ margin: 16px 0 0;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 20px; /* 166.667% */
|
|
|
+ color: #165dff;
|
|
|
+ cursor: pointer;
|
|
|
+ border: 1px solid #165dff;
|
|
|
+ border-radius: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-resource {
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+
|
|
|
+.sentence-item {
|
|
|
+ display: flex;
|
|
|
+ flex-flow: wrap;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.sentence-pic {
|
|
|
+ width: 10px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|
liuhaidi123