From 279761232b45765cf901e80007b184a3c8b494a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=8B=E4=BA=8E=E5=88=9D=E8=A7=81?= <752204717@qq.com>
Date: Thu, 15 Aug 2024 17:28:50 +0800
Subject: [PATCH] =?UTF-8?q?refers=E6=96=B0=E5=A2=9E=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/page/articleListEditor_E.vue | 2275 ++++++++++---------
 1 file changed, 1173 insertions(+), 1102 deletions(-)

diff --git a/src/components/page/articleListEditor_E.vue b/src/components/page/articleListEditor_E.vue
index 641c4a7..817e8b3 100644
--- a/src/components/page/articleListEditor_E.vue
+++ b/src/components/page/articleListEditor_E.vue
@@ -1,214 +1,244 @@
 <template>
-	<div>
-		<div class="handle-box">
-			<el-select v-model="queryType.issn" @change="getJourChange" placeholder="Please select a journal"
-				style="width: 250px;">
-				<el-option v-for="item in journalList" :key="item.issn" :label="item.title" :value="item.issn">
-				</el-option>
-			</el-select>
-			<el-select v-model="queryType.journal_stage_id" @change="getDate" placeholder="Please select a stage"
-				style="width: 250px;margin-left: 15px;">
-				<el-option :key="0" label="All stages" :value="0"></el-option>
-				<el-option v-for="item in stageList" :key="item.journal_stage_id"
-					:label="item.stage_year+' Vol.'+item.stage_vol +' issue.'+item.stage_no+' '+item.stage_pagename+item.stage_page"
-					:value="item.journal_stage_id">
-				</el-option>
-			</el-select>
-			<el-input v-model="queryType.seach" placeholder="Please enter keywords..."
-				style="width: 200px;margin-left: 15px;"></el-input>
-			<el-button type="primary" @click="getDate" style="margin-left: 15px;">
-				<i class="el-icon-search" style="margin-right: 5px;"></i>Search
-			</el-button>
-		</div>
-		<el-table :data="dataTable" border stripe class="table" ref="multipleTable"
-			header-cell-class-name="table-header" empty-text="New messages (0)">
-			<el-table-column width="80" label="No." prop="npp" align="center"></el-table-column>
-			<el-table-column width="140" label="Stage" align="center">
-				<template slot-scope="scope">
-					{{scope.row.stage_year}} Vol.{{scope.row.stage_vol}} issue.{{scope.row.stage_no}}
-					<br>
-					<el-button style="margin-top: 10px;" size="mini" type="success" plain icon="el-icon-view"
-						@click="lookView(scope.row)">
-						Preview</el-button>
-				</template>
-			</el-table-column>
-			<el-table-column label="Title">
-				<template slot-scope="scope">
-					<p v-html="scope.row.title"></p>
-				</template>
-			</el-table-column>
-			<el-table-column label="Html" width="100px" align="center">
-				<template slot-scope="scope">
-					<p>
-						<span style="margin: 0 5px 0 0;">File: </span>
-						<b class="el-icon-check" style="color: #0fa31d;font-weight: bold;"
-							v-if="scope.row.file_html!=''">
-						</b>
-						<b class="el-icon-close" style="color: #ff0000;font-weight: bold;"
-							v-if="scope.row.file_html==''">
-						</b>
-					</p>
-					<p>
-						<span style="margin: 0 5px 0 0;">Layout: </span>
-						<b class="el-icon-check" style="color: #0fa31d;font-weight: bold;" v-if="scope.row.mains == 1">
-						</b>
-						<b class="el-icon-close" style="color: #ff0000;font-weight: bold;" v-if="scope.row.mains == 0">
-						</b>
-					</p>
-				</template>
-			</el-table-column>
-			<el-table-column label="Sort" width="60px" align="center">
-				<template slot-scope="scope">
-					<p v-html="scope.row.sort"></p>
-				</template>
-			</el-table-column>
-			<el-table-column label="" width="190px" align="center">
-				<template slot-scope="scope">
-					<el-button size="mini" type="primary" plain icon="el-icon-edit" @click="EditDetail(scope.row)">
-						Edit</el-button>
-					<el-button size="mini" type="primary" plain icon="el-icon-notebook-2"
-						@click="htmlContet(scope.row)">
-						Html</el-button>
-					<p style="margin-top: 10px;">
-						<el-button size="mini" type="primary" plain icon="el-icon-tickets"
-							@click="ChoseRelated(scope.row)">
-							Relevant</el-button>
-					</p>
-				</template>
-			</el-table-column>
-		</el-table>
-		<div class="pagination">
-			<el-pagination background layout="total, prev, pager, next" :current-page="queryType.pageIndex"
-				:page-size="queryType.pageSize" :total="Total" @current-change="handlePageChange"></el-pagination>
-		</div>
+    <div>
+        <div class="handle-box">
+            <el-select v-model="queryType.issn" @change="getJourChange" placeholder="Please select a journal" style="width: 250px">
+                <el-option v-for="item in journalList" :key="item.issn" :label="item.title" :value="item.issn"> </el-option>
+            </el-select>
+            <el-select
+                v-model="queryType.journal_stage_id"
+                @change="getDate"
+                placeholder="Please select a stage"
+                style="width: 250px; margin-left: 15px"
+            >
+                <el-option :key="0" label="All stages" :value="0"></el-option>
+                <el-option
+                    v-for="item in stageList"
+                    :key="item.journal_stage_id"
+                    :label="
+                        item.stage_year + ' Vol.' + item.stage_vol + ' issue.' + item.stage_no + ' ' + item.stage_pagename + item.stage_page
+                    "
+                    :value="item.journal_stage_id"
+                >
+                </el-option>
+            </el-select>
+            <el-input v-model="queryType.seach" placeholder="Please enter keywords..." style="width: 200px; margin-left: 15px"></el-input>
+            <el-button type="primary" @click="getDate" style="margin-left: 15px">
+                <i class="el-icon-search" style="margin-right: 5px"></i>Search
+            </el-button>
+        </div>
+        <el-table
+            :data="dataTable"
+            border
+            stripe
+            class="table"
+            ref="multipleTable"
+            header-cell-class-name="table-header"
+            empty-text="New messages (0)"
+        >
+            <el-table-column width="80" label="No." prop="npp" align="center"></el-table-column>
+            <el-table-column width="140" label="Stage" align="center">
+                <template slot-scope="scope">
+                    {{ scope.row.stage_year }} Vol.{{ scope.row.stage_vol }} issue.{{ scope.row.stage_no }}
+                    <br />
+                    <el-button style="margin-top: 10px" size="mini" type="success" plain icon="el-icon-view" @click="lookView(scope.row)">
+                        Preview</el-button
+                    >
+                </template>
+            </el-table-column>
+            <el-table-column label="Title">
+                <template slot-scope="scope">
+                    <p v-html="scope.row.title"></p>
+                </template>
+            </el-table-column>
+            <el-table-column label="Html" width="100px" align="center">
+                <template slot-scope="scope">
+                    <p>
+                        <span style="margin: 0 5px 0 0">File: </span>
+                        <b class="el-icon-check" style="color: #0fa31d; font-weight: bold" v-if="scope.row.file_html != ''"> </b>
+                        <b class="el-icon-close" style="color: #ff0000; font-weight: bold" v-if="scope.row.file_html == ''"> </b>
+                    </p>
+                    <p>
+                        <span style="margin: 0 5px 0 0">Layout: </span>
+                        <b class="el-icon-check" style="color: #0fa31d; font-weight: bold" v-if="scope.row.mains == 1"> </b>
+                        <b class="el-icon-close" style="color: #ff0000; font-weight: bold" v-if="scope.row.mains == 0"> </b>
+                    </p>
+                </template>
+            </el-table-column>
+            <el-table-column label="Sort" width="60px" align="center">
+                <template slot-scope="scope">
+                    <p v-html="scope.row.sort"></p>
+                </template>
+            </el-table-column>
+            <el-table-column label="" width="190px" align="center">
+                <template slot-scope="scope">
+                    <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="EditDetail(scope.row)"> Edit</el-button>
+                    <el-button size="mini" type="primary" plain icon="el-icon-notebook-2" @click="htmlContet(scope.row)"> Html</el-button>
+                    <p style="margin-top: 10px">
+                        <el-button size="mini" type="primary" plain icon="el-icon-tickets" @click="ChoseRelated(scope.row)">
+                            Relevant</el-button
+                        >
+                    </p>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="pagination">
+            <el-pagination
+                background
+                layout="total, prev, pager, next"
+                :current-page="queryType.pageIndex"
+                :page-size="queryType.pageSize"
+                :total="Total"
+                @current-change="handlePageChange"
+            ></el-pagination>
+        </div>
 
-		<!-- 修改信息 -->
-		<el-dialog title="" :visible.sync="EditVisible" width="750px" :close-on-click-modal="false">
-			<el-form ref="editMes" :model="EditMes" label-width="120px">
-				<el-form-item label="Title :">
-					<p v-html="EditMes.title"></p>
-				</el-form-item>
-				<el-form-item label="Guest Journal :">
-					<el-select v-model="EditMes.journal_special_id" placeholder="Please select a guest journal"
-						style="width: 300px;">
-						<el-option :key="0" label="None" :value="0"></el-option>
-						<el-option v-for="item in guestList" :key="item.journal_special_id" :label="item.title"
-							:value="item.journal_special_id"></el-option>
-					</el-select>
-				</el-form-item>
-				<el-form-item label="Sort :">
-					{{EditMes.sort}}
-					<!-- <el-input-number v-model="EditMes.sort"></el-input-number> -->
-				</el-form-item>
-				<el-form-item label="Topics :">
-					<p v-for="item in topListName">{{item}}</p>
-					<el-button type="warning" @click="topicVisible = true" size="mini" style="margin-top: 5px;">Change
-						topics</el-button>
-				</el-form-item>
-			</el-form>
-			<span slot="footer" class="dialog-footer">
-				<el-button @click="EditVisible = false" plain>Cancel</el-button>
-				<el-button type="primary" @click="saveEdit">OK</el-button>
-			</span>
-		</el-dialog>
+        <!-- 修改信息 -->
+        <el-dialog title="" :visible.sync="EditVisible" width="750px" :close-on-click-modal="false">
+            <el-form ref="editMes" :model="EditMes" label-width="120px">
+                <el-form-item label="Title :">
+                    <p v-html="EditMes.title"></p>
+                </el-form-item>
+                <el-form-item label="Guest Journal :">
+                    <el-select v-model="EditMes.journal_special_id" placeholder="Please select a guest journal" style="width: 300px">
+                        <el-option :key="0" label="None" :value="0"></el-option>
+                        <el-option
+                            v-for="item in guestList"
+                            :key="item.journal_special_id"
+                            :label="item.title"
+                            :value="item.journal_special_id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="Sort :">
+                    {{ EditMes.sort }}
+                    <!-- <el-input-number v-model="EditMes.sort"></el-input-number> -->
+                </el-form-item>
+                <el-form-item label="Topics :">
+                    <p v-for="item in topListName">{{ item }}</p>
+                    <el-button type="warning" @click="topicVisible = true" size="mini" style="margin-top: 5px">Change topics</el-button>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="EditVisible = false" plain>Cancel</el-button>
+                <el-button type="primary" @click="saveEdit">OK</el-button>
+            </span>
+        </el-dialog>
 
-		<!-- 话题信息 -->
-		<el-dialog title="" :visible.sync="topicVisible" width="550px">
-			<el-form ref="editMes" :model="EditMes" label-width="50px">
-				<el-form-item label="">
-					<el-checkbox-group v-model="EditMes.topic" value-key='journal_topic_id'>
-						<el-checkbox v-for="item in listopic" style="display:block;" name="topic"
-							:label="item.journal_topic_id+''" :key="item.journal_topic_id"
-							@change="chan_topic($event,item)">{{item.tname}}</el-checkbox>
-					</el-checkbox-group>
-				</el-form-item>
-			</el-form>
-			<span slot="footer" class="dialog-footer">
-				<el-button type="primary" @click="topicVisible = false" plain>Close</el-button>
-			</span>
-		</el-dialog>
+        <!-- 话题信息 -->
+        <el-dialog title="" :visible.sync="topicVisible" width="550px">
+            <el-form ref="editMes" :model="EditMes" label-width="50px">
+                <el-form-item label="">
+                    <el-checkbox-group v-model="EditMes.topic" value-key="journal_topic_id">
+                        <el-checkbox
+                            v-for="item in listopic"
+                            style="display: block"
+                            name="topic"
+                            :label="item.journal_topic_id + ''"
+                            :key="item.journal_topic_id"
+                            @change="chan_topic($event, item)"
+                            >{{ item.tname }}</el-checkbox
+                        >
+                    </el-checkbox-group>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="topicVisible = false" plain>Close</el-button>
+            </span>
+        </el-dialog>
 
-		<!-- 相关期刊 -->
-		<el-dialog title="" :visible.sync="RelatVisible" width="1000px" @close='RelatCancle'
-			:close-on-click-modal="false">
-			<p style="font-weight: bold;font-size: 16px;margin-bottom: 30px;" v-html="RelatMes.title"></p>
-			<p class="reta_tit" style="margin-bottom: 15px;margin-top: 0;">Related articles selected</p>
-			<div>
-				<div v-for="item in chooseData" class="choose_list" @mouseover="mouseover(item)"
-					@mouseleave="mouseout(item)">
-					<div>
-						<p class="choose_title">
-							<b>{{item.journal_title}}</b>
-							<span>——</span>
-							{{ item.title }}
-						</p>
-					</div>
-					<!-- 删除 -->
-					<el-button v-show="item.dropdownShow" class="choose_btn" size="mini" type="danger" plain
-						@click="deleteTree(item.article_id)">Delete
-					</el-button>
-				</div>
-				<p v-if="chooseData==''" style="color: #777;padding: 5px 0 0 15px;">No Articles</p>
-			</div>
-			<p style="height: 1px;background-color: #ddd;width: 100%;margin-top: 35px;"></p>
-			<p class="reta_tit">
-				All articles
-				<el-input v-model="RelatMes.keyword" placeholder="Please enter keywords..."
-					style="width: 200px;margin-left: 20px;"></el-input>
-				<el-button type="primary" style="margin-left: 20px;" @click="NoneRelated">
-					<i class="el-icon-search" style="margin-right: 5px;"></i>Search
-				</el-button>
-			</p>
-			<p v-if="alljourData==''" style="color: #777;padding: 5px 0 0 15px;">No Articles</p>
-			<div>
-				<el-row :gutter="20">
-					<el-col :span="8">
-						<div class="journal_list">
-							<div v-for="(item,index) in alljourData" @click="steps_title(index)"
-								:class="steps_jour == index?'Tab_col':''">
-								<p>
-									{{item.title}}
-									<span style="font-size: 12px;"> ({{item.articles.length}})</span>
-								</p>
-							</div>
-						</div>
-					</el-col>
-					<el-col :span="16">
-						<div v-for="item in selectRelate" class="selected_list">
-							<div>
-								<p class="selected_title">{{ item.title }}</p>
-							</div>
-							<!-- 添加 -->
-							<el-button class="selected_btn" size="mini" type="success" plain
-								@click="addTree(item.article_id)">Add</el-button>
-						</div>
-					</el-col>
-				</el-row>
-			</div>
-			<span slot="footer" class="dialog-footer">
-				<el-button type="primary" @click="RelatVisible = false" plain>Close</el-button>
-			</span>
-		</el-dialog>
+        <!-- 相关期刊 -->
+        <el-dialog title="" :visible.sync="RelatVisible" width="1000px" @close="RelatCancle" :close-on-click-modal="false">
+            <p style="font-weight: bold; font-size: 16px; margin-bottom: 30px" v-html="RelatMes.title"></p>
+            <p class="reta_tit" style="margin-bottom: 15px; margin-top: 0">Related articles selected</p>
+            <div>
+                <div v-for="item in chooseData" class="choose_list" @mouseover="mouseover(item)" @mouseleave="mouseout(item)">
+                    <div>
+                        <p class="choose_title">
+                            <b>{{ item.journal_title }}</b>
+                            <span>——</span>
+                            {{ item.title }}
+                        </p>
+                    </div>
+                    <!-- 删除 -->
+                    <el-button
+                        v-show="item.dropdownShow"
+                        class="choose_btn"
+                        size="mini"
+                        type="danger"
+                        plain
+                        @click="deleteTree(item.article_id)"
+                        >Delete
+                    </el-button>
+                </div>
+                <p v-if="chooseData == ''" style="color: #777; padding: 5px 0 0 15px">No Articles</p>
+            </div>
+            <p style="height: 1px; background-color: #ddd; width: 100%; margin-top: 35px"></p>
+            <p class="reta_tit">
+                All articles
+                <el-input
+                    v-model="RelatMes.keyword"
+                    placeholder="Please enter keywords..."
+                    style="width: 200px; margin-left: 20px"
+                ></el-input>
+                <el-button type="primary" style="margin-left: 20px" @click="NoneRelated">
+                    <i class="el-icon-search" style="margin-right: 5px"></i>Search
+                </el-button>
+            </p>
+            <p v-if="alljourData == ''" style="color: #777; padding: 5px 0 0 15px">No Articles</p>
+            <div>
+                <el-row :gutter="20">
+                    <el-col :span="8">
+                        <div class="journal_list">
+                            <div
+                                v-for="(item, index) in alljourData"
+                                @click="steps_title(index)"
+                                :class="steps_jour == index ? 'Tab_col' : ''"
+                            >
+                                <p>
+                                    {{ item.title }}
+                                    <span style="font-size: 12px"> ({{ item.articles.length }})</span>
+                                </p>
+                            </div>
+                        </div>
+                    </el-col>
+                    <el-col :span="16">
+                        <div v-for="item in selectRelate" class="selected_list">
+                            <div>
+                                <p class="selected_title">{{ item.title }}</p>
+                            </div>
+                            <!-- 添加 -->
+                            <el-button class="selected_btn" size="mini" type="success" plain @click="addTree(item.article_id)"
+                                >Add</el-button
+                            >
+                        </div>
+                    </el-col>
+                </el-row>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="RelatVisible = false" plain>Close</el-button>
+            </span>
+        </el-dialog>
 
-
-		<!-- Html排版 -->
-		<el-dialog title="HTML layout" :visible.sync="HtmlVisible" width="900px" :close-on-click-modal="false" @close="CancelHtml">
-			<div style="margin: 0 0 0 10px;" class="htmlfile">
-				<h3 style="font-size: 16px;margin-bottom: 25px;line-height: 22px;letter-spacing: -0.5px;word-break: break-word;"
-					v-html="UpHtpFIle.title"></h3>
-				<div target="_blank" v-if="UpHtpFIle.htmlfile==''">
-					<font style="font-size: 16px;">Html File :</font>
-					<span style="color: rgb(102, 102, 102);margin-left: 15px;">No Manuscript</span>
-				</div>
-				<div target="_blank" v-if="UpHtpFIle.htmlfile!=''">
-					<font style="font-size: 16px;">Html File :</font>
-					<a :href="'https://www.tmrjournals.com/public/articleHTML/'+UpHtpFIle.htmlfile" target="_blank">
-						<img src="../../assets/img/icon_0.png" style="vertical-align: sub;margin: 0 15px;">
-						<span style="color: #333;">Html File</span>
-						<i class="el-icon-view" style="color: #66b1ff;font-weight: bold;margin-left: 20px;"></i>
-					</a>
-				</div>
-				<!-- <div style="margin: 20px 0 0 88px">
+        <!-- Html排版 -->
+        <el-dialog title="HTML layout" :visible.sync="HtmlVisible" width="900px" :close-on-click-modal="false" @close="CancelHtml">
+            <div style="margin: 0 0 0 10px" class="htmlfile">
+                <h3
+                    style="font-size: 16px; margin-bottom: 25px; line-height: 22px; letter-spacing: -0.5px; word-break: break-word"
+                    v-html="UpHtpFIle.title"
+                ></h3>
+                <div target="_blank" v-if="UpHtpFIle.htmlfile == ''">
+                    <font style="font-size: 16px">Html File :</font>
+                    <span style="color: rgb(102, 102, 102); margin-left: 15px">No Manuscript</span>
+                </div>
+                <div target="_blank" v-if="UpHtpFIle.htmlfile != ''">
+                    <font style="font-size: 16px">Html File :</font>
+                    <a :href="'https://www.tmrjournals.com/public/articleHTML/' + UpHtpFIle.htmlfile" target="_blank">
+                        <img src="../../assets/img/icon_0.png" style="vertical-align: sub; margin: 0 15px" />
+                        <span style="color: #333">Html File</span>
+                        <i class="el-icon-view" style="color: #66b1ff; font-weight: bold; margin-left: 20px"></i>
+                    </a>
+                </div>
+                <!-- <div style="margin: 20px 0 0 88px">
 					<el-upload ref="uploadUpHt" class="upload-demo" :action="baseUrl + 'api/Production/up_pdf_file'"
 						accept=".pdf," name="pdf" :before-upload="beforeupload_UpHt" :on-error="uperr_UpHt"
 						:on-success="upSuccess_UpHt" :limit="1" :on-exceed="alertlimit" :on-remove="removefileUpHt"
@@ -223,981 +253,1022 @@
 							can be uploaded(.pdf)</div>
 					</el-upload>
 				</div> -->
-				<p style="border-top: 2px dashed #0066994d;margin: 20px 0 0 0;padding: 20px 0 0 0;"> </p>
-				<el-collapse  v-model="collapseActiveNames">
-					<el-collapse-item name="html" v-loading="loadHtml">
-						<template slot="title" >
-							Html Layout : 
-							<span style="margin-left: 15px;color: #666;" v-if="mains==''">No Layout</span>
-							<span style="margin-left: 15px;color: #0b4b6a;" v-if="mains!=''">Typesetting completed</span>
-							<el-button v-if="mains!=''" type="primary" plain icon="el-icon-document-copy" @click.stop @click="htmlLayout()"
-											style="margin-left: 20px;">											
-											<font >Edit Html Proofread</font>
-							</el-button>
-							<el-button v-if="mains!=''" type="danger" plain icon="el-icon-document-copy" @click.stop @click="clearHtmlLayout()"
-											style="margin-left: 20px;">											
-											<font >Remove Html Proofread</font>
-							</el-button>
-						</template>
-						<div>
-							<!-- 生成选项 -->
-							<div v-if="mains==''">
-								<el-radio v-model="createType" label="1">Use last manuscirpt version</el-radio>
-  								<el-radio v-model="createType" label="2">Use new file upload</el-radio>								
-								
-								<!-- 使用默认最新稿件生成 -->
-								<div style="margin: 20px 0 0 0" v-if="createType == '1'"> 									
-									<el-button type="primary" @click="htmlLayout" class="import" >Create Html Proofread</el-button> 
-								</div>
-								<!-- 文件上传 -->
-								  <div class="up" style="margin: 20px 0 0 0" v-if="createType == '2'">
-									<el-upload ref="uploadFile" class="upload-demo up_newstyle" :action="upload_manuscirpt"
-										accept=".docx" name="completedManuscirpt" :before-upload="beforeupload_manuscirpt"
-										:on-error="uperr_coverLetter" :on-success="upSuccess_manuscirpt" :limit="1"
-										:on-exceed="alertlimit" :on-remove="removefilemanuscirpt" :file-list="fileL_manuscirpt"										
-										>
-										<div class="el-upload__text" @click="clearUploadedFile">
-											<em>Upload File</em>
-										</div>
-										<!-- <div class="el-upload__tip" slot="tip">
+                <p style="border-top: 2px dashed #0066994d; margin: 20px 0 0 0; padding: 20px 0 0 0"></p>
+                <el-collapse v-model="collapseActiveNames">
+                    <el-collapse-item name="html" v-loading="loadHtml">
+                        <template slot="title">
+                            Html Layout :
+                            <span style="margin-left: 15px; color: #666" v-if="mains == ''">No Layout</span>
+                            <span style="margin-left: 15px; color: #0b4b6a" v-if="mains != ''">Typesetting completed</span>
+                            <el-button
+                                v-if="mains != ''"
+                                type="primary"
+                                plain
+                                icon="el-icon-document-copy"
+                                @click.stop
+                                @click="htmlLayout()"
+                                style="margin-left: 20px"
+                            >
+                                <font>Edit Html Proofread</font>
+                            </el-button>
+                            <el-button
+                                v-if="mains != ''"
+                                type="danger"
+                                plain
+                                icon="el-icon-document-copy"
+                                @click.stop
+                                @click="clearHtmlLayout()"
+                                style="margin-left: 20px"
+                            >
+                                <font>Remove Html Proofread</font>
+                            </el-button>
+                        </template>
+                        <div>
+                            <!-- 生成选项 -->
+                            <div v-if="mains == ''">
+                                <el-radio v-model="createType" label="1">Use last manuscirpt version</el-radio>
+                                <el-radio v-model="createType" label="2">Use new file upload</el-radio>
+
+                                <!-- 使用默认最新稿件生成 -->
+                                <div style="margin: 20px 0 0 0" v-if="createType == '1'">
+                                    <el-button type="primary" @click="htmlLayout" class="import">Create Html Proofread</el-button>
+                                </div>
+                                <!-- 文件上传 -->
+                                <div class="up" style="margin: 20px 0 0 0" v-if="createType == '2'">
+                                    <el-upload
+                                        ref="uploadFile"
+                                        class="upload-demo up_newstyle"
+                                        :action="upload_manuscirpt"
+                                        accept=".docx"
+                                        name="completedManuscirpt"
+                                        :before-upload="beforeupload_manuscirpt"
+                                        :on-error="uperr_coverLetter"
+                                        :on-success="upSuccess_manuscirpt"
+                                        :limit="1"
+                                        :on-exceed="alertlimit"
+                                        :on-remove="removefilemanuscirpt"
+                                        :file-list="fileL_manuscirpt"
+                                    >
+                                        <div class="el-upload__text" @click="clearUploadedFile">
+                                            <em>Upload File</em>
+                                        </div>
+                                        <!-- <div class="el-upload__tip" slot="tip">
 											Only Word and compressed files can be uploaded (file format: .docx).
 										</div> -->
-									</el-upload>
-									<el-button type="primary" @click="htmlLayout" class="import" >Create Html Proofread</el-button> 
-								</div>								
-								<!-- end -->
-							</div>
-							<!-- end -->
-							<div class="titHtml" v-if="mains!=''">
-								<div v-for="(item,index) in mains" :key="index">
-									<p v-html="item.content" v-if="item.width==0"></p>
-									<p v-if="item.width!=0" class="MaxPicture">
-										<img :src="baseUrl+'public/mainimg/'+item.content" :style="'width:'+item.width+'px'">
-										<font :style="'width:'+item.width+'px'">{{item.note}}</font>
-									</p>
-								</div>
-							</div>
-						</div>						
-					</el-collapse-item>
-					<el-collapse-item name="references">
-						<template slot="title">
-							References : 
-							<span style="margin-left: 15px;color: #666;" v-if="UpHtpFIle.refers==''">Have no refernces</span>
-							<span style="margin-left: 15px;color: #0b4b6a;" v-if="UpHtpFIle.refers!=''">There are {{UpHtpFIle.refers.length}} pieces of data in total.</span>
-							<el-button type="primary" plain icon="el-icon-document-copy" @click="goEditRefernces" @click.stop
-											style="margin-left: 20px;">											
-								<font >Edit References</font>											
-							</el-button>
-						</template>
-							<div>
-								<el-table class="table99" v-if="UpHtpFIle.refers!=''" height="400px" :header-cell-style="{background:'#eef1f6',color:'#606266'}"
-								:data="UpHtpFIle.refers"
-								stripe
-								style="width: 100%">
-								<el-table-column
-								type="index" align="center"
-								width="50">
-								</el-table-column>
-								<el-table-column								
-								label="CONTENT" align="center"
-								>
-								<template slot-scope="scope">
-									<div style="text-align: left;" v-if="scope.row.refer_type == 'journal'">
-										<p>{{scope.row.author}},{{scope.row.title}}, <em>{{scope.row.joura}}</em> ,{{scope.row.dateno}}<br/></p>
-										<a class="doiLink" :href="scope.row.doilink" target="_blank">{{scope.row.doilink}}</a>                         
-									</div>
-									<div style="text-align: left;" v-if="scope.row.refer_type == 'book'">
-										<p>{{scope.row.author}},{{scope.row.title}},{{scope.row.dateno}}<br/></p>
-										<a class="doiLink" :href="scope.row.isbn" target="_blank">{{scope.row.isbn}}</a>                         
-									</div>
-									<p  class="wrongLine" style="text-align: left;" v-if="scope.row.refer_type == 'other'">
-										{{scope.row.refer_frag}}                                                                  
-									</p>
-								</template>
-								</el-table-column>
-								</el-table>
-							</div>						
-					</el-collapse-item>
-				</el-collapse>	
-				
-			</div>
-			<span slot="footer" class="dialog-footer">
-				<el-button @click="CancelHtml" plain>Cancel</el-button>
-			</span>
-		</el-dialog>
-
-	</div>
+                                    </el-upload>
+                                    <el-button type="primary" @click="htmlLayout" class="import">Create Html Proofread</el-button>
+                                </div>
+                                <!-- end -->
+                            </div>
+                            <!-- end -->
+                            <div class="titHtml" v-if="mains != ''">
+                                <div v-for="(item, index) in mains" :key="index">
+                                    <p v-html="item.content" v-if="item.width == 0"></p>
+                                    <p v-if="item.width != 0" class="MaxPicture">
+                                        <img :src="baseUrl + 'public/mainimg/' + item.content" :style="'width:' + item.width + 'px'" />
+                                        <font :style="'width:' + item.width + 'px'">{{ item.note }}</font>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </el-collapse-item>
+                    <el-collapse-item name="references">
+                        <template slot="title">
+                            References :
+                            <span style="margin-left: 15px; color: #666" v-if="refersList.length == 0">Have no refernces</span>
+                            <span style="margin-left: 15px; color: #0b4b6a" v-if="refersList.length > 0"
+                                >There are {{ refersList.length }} pieces of data in total.</span
+                            >
+                            <el-button
+                                type="primary"
+                                plain
+                                icon="el-icon-document-copy"
+                                @click="goEditRefernces"
+                                @click.stop
+                                style="margin-left: 20px"
+                            >
+                                <font>Edit References</font>
+                            </el-button>
+                        </template>
+                        <div>
+                            <el-table
+                                class="table99"
+                                v-if="refersList.length > 0"
+                                height="400px"
+                                :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+                                :data="refersList"
+                                stripe
+                                style="width: 100%"
+                            >
+                                <el-table-column type="index" align="center" width="50"> </el-table-column>
+                                <el-table-column label="CONTENT" align="center">
+                                    <template slot-scope="scope">
+                                        <div style="text-align: left" v-if="scope.row.refer_type == 'journal'">
+                                            <p>
+                                                {{ scope.row.author }},{{ scope.row.title }}, <em>{{ scope.row.joura }}</em> ,{{
+                                                    scope.row.dateno
+                                                }}<br />
+                                            </p>
+                                            <a class="doiLink" :href="scope.row.doilink" target="_blank">{{ scope.row.doilink }}</a>
+                                        </div>
+                                        <div style="text-align: left" v-if="scope.row.refer_type == 'book'">
+                                            <p>{{ scope.row.author }},{{ scope.row.title }},{{ scope.row.dateno }}<br /></p>
+                                            <a class="doiLink" :href="scope.row.isbn" target="_blank">{{ scope.row.isbn }}</a>
+                                        </div>
+                                        <p class="wrongLine" style="text-align: left" v-if="scope.row.refer_type == 'other'">
+                                            {{ scope.row.refer_frag }}
+                                        </p>
+                                    </template>
+                                </el-table-column>
+                            </el-table>
+                        </div>
+                    </el-collapse-item>
+                </el-collapse>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="CancelHtml" plain>Cancel</el-button>
+            </span>
+        </el-dialog>
+    </div>
 </template>
 
 <script>
-	import {
-		Loading
-	} from 'element-ui';
+import { Loading } from 'element-ui';
 import { watch } from 'vue';
-	export default {
-		data() {
-			return {
-				articleId:null,
-				createType:'1',    // html生成方式
-				collapseActiveNames:[], // 手风琴绑定值
-				// oldFile:false,   // 是否用新文件生成  
-				fileL_manuscirpt: [],
-				baseUrl: this.Common.baseUrl,
-				mediaUrl: this.Common.mediaUrl,
-				username: localStorage.getItem('U_name'),
-				editor_id: localStorage.getItem('U_id'),
-				queryType: {
-					issn: '',
-					journal_stage_id: 0,
-					seach: '',
-					pageIndex: 1,
-					pageSize: 10
-				},
-				Total: 0,
-				dataTable: [],
-				stageList: [],
-				journalList: [],
-				guestList: [],
-				EditMes: {
-					journal_special_id: 0,
-					article_id: 0,
-					title: 0,
-					sort: 0,
-				},
-				RelatMes: {
-					keyword: ''
-				},
-				UpHtpFIle: {
-					title: '',
-					article_id: '',
-					p_article_id:null,
-					htmlfile: '',
-					mains: [],
-					refers:[], //引用参数
-				},
-				UpLoadFile: {
-					article_id: '',
-					file: '',
-				},
-				HtmlMes: {},
-				EditVisible: false,
-				RelatVisible: false,
-				topicVisible: false,
-				HtmlVisible: false,
-				topListName: [],
-				listopic: [],
-				title_header: '',
-				alljourData: [],
-				selectRelate: [],
-				chooseData: [],
-				loading: false,
-				steps_jour: 0,
-				loadHtml:false,    // mains 加载动画
-				form:{
-					manuscirpt: '',
-				},
-				fileData:'', // 上传后返回的文件url
-				mains:[] // html 数据
-			};
-		},
-		created() {
-			this.getJourDate();
-		},
-		computed: {			
-			upload_coverLetter: function() {
-				return this.baseUrl + 'api/Article/up_file/type/coverLetter';
-			},
-			upload_manuscirpt: function() {
-				return this.baseUrl + 'api/Production/up_last_artFile';
-			},
-		},
-		methods: {			
-			// 获取列表
-			getDate() {
-				const loading = this.$loading({
-					lock: true,
-					text: 'Loading...',
-					spinner: 'el-icon-loading',
-					background: 'rgba(0, 0, 0, 0.7)'
-				});
-				this.$api
-					.post('api/Publish/getPublicAiticles', this.queryType)
-					.then(res => {
-						this.dataTable = res.data.articleList;
-						this.Total = res.data.count
-						loading.close();
-					})
-					.catch(err => {
-						console.log(err);
-						loading.close();
-					});
-			},
-			// 清空html
-			clearHtmlLayout(){
-				this.$confirm('You are Removing Html Proofread, do you want to continue?', 'Tips', {
-					confirmButtonText: 'Sure',
-					cancelButtonText: 'Cancle',
-					type: 'warning'
-					}).then(() => {
-						this.$api
-						.post('api/Production/clearWebMains', {
-							'article_id': this.articleId,
-						})
-						.then(res => {
-							if(res.code == 0){
-								this.getDate()	
-							}else{
-								this.$message.error(res.msg)
-							}						
-						})
-						.catch(err => {
-							console.log(err);
-						});
-					}).catch(() => {});
-			},
-			// 跳转到引用编辑页面
-			goEditRefernces(){
-				// let pid = null
-				this.HtmlVisible = false
-				//this.UpHtpFIle.refers.length > 0 ? pid = this.UpHtpFIle.refers[0].p_article_id : \
-				this.$router.push({
-					name: 'publishRefernceEditor',
-						query: {
-							id: this.articleId,
-							pid: this.UpHtpFIle.p_article_id
-						}
-				})
-			},
-			CancelHtml(){
-				this.HtmlVisible = false
-				this.form.manuscirpt = ''
-				this.fileData = ''
-				this.fileL_manuscirpt = []
-				this.createType = '1'    // html生成方式
-				this.collapseActiveNames = ['html']
-				
-			},			
-			beforeupload_manuscirpt(file) {
-				let flieArr = file.name.split(".")
-				let fileSuffix = flieArr[flieArr.length - 1];
-				if (fileSuffix != 'docx') {
-					this.$message.error('Only word and compressed files can be uploaded(.docx)');
-					return false;
-				}				
-			},
-			upSuccess_manuscirpt(res, file) {
-				if (res.code == 0) {				
-					 this.fileData = res.upurl
-					this.form.manuscirpt = 'manuscirpt/' + res.upurl;
-					this.fileL_manuscirpt = [{}];
-					this.fileL_manuscirpt[0].name = "Manuscirpt File";
-					this.fileL_manuscirpt[0].url = 'manuscirpt/' + res.upurl;					
-				} else {
-					this.$message.error('service error: ' + res.msg);
-				}
-			},
-			//超出传送文件个数限制
-			alertlimit() {
-				this.$message.error('The maximum number of uploaded files has been exceeded');
-			},
-			removefilemanuscirpt(file, fileList) {
-				this.form.manuscirpt = '';
-				this.fileL_manuscirpt = [];				
-			},
-			clearUploadedFile() {
-				this.$refs['uploadFile'].clearFiles();
-			},
-			uperr_coverLetter(err) {
-				this.$message.error('Upload error');
-			},
-			
-			//初始化期刊分期
-			getJourDate() {
-				this.$api
-					.post('api/Article/getJournal', {
-						'username': this.username
-					})
-					.then(res => {
-						this.journalList = res;
-						this.queryType.issn = res[0].issn
+export default {
+    data() {
+        return {
+            articleId: null,
+            createType: '1', // html生成方式
+            collapseActiveNames: [], // 手风琴绑定值
+            // oldFile:false,   // 是否用新文件生成
+            fileL_manuscirpt: [],
+            baseUrl: this.Common.baseUrl,
+            mediaUrl: this.Common.mediaUrl,
+            username: localStorage.getItem('U_name'),
+            editor_id: localStorage.getItem('U_id'),
+            queryType: {
+                issn: '',
+                journal_stage_id: 0,
+                seach: '',
+                pageIndex: 1,
+                pageSize: 10
+            },
+            Total: 0,
+            dataTable: [],
+            stageList: [],
+            journalList: [],
+            guestList: [],
+            EditMes: {
+                journal_special_id: 0,
+                article_id: 0,
+                title: 0,
+                sort: 0
+            },
+            RelatMes: {
+                keyword: ''
+            },
+            UpHtpFIle: {
+                title: '',
+                article_id: '',
+                p_article_id: null,
+                htmlfile: '',
+                mains: []
+                // refers:[], //引用参数
+            },
+            refersList: [],
+            UpLoadFile: {
+                article_id: '',
+                file: ''
+            },
+            HtmlMes: {},
+            EditVisible: false,
+            RelatVisible: false,
+            topicVisible: false,
+            HtmlVisible: false,
+            topListName: [],
+            listopic: [],
+            title_header: '',
+            alljourData: [],
+            selectRelate: [],
+            chooseData: [],
+            loading: false,
+            steps_jour: 0,
+            loadHtml: false, // mains 加载动画
+            form: {
+                manuscirpt: ''
+            },
+            fileData: '', // 上传后返回的文件url
+            mains: [] // html 数据
+        };
+    },
+    created() {
+        this.getJourDate();
+    },
+    computed: {
+        upload_coverLetter: function () {
+            return this.baseUrl + 'api/Article/up_file/type/coverLetter';
+        },
+        upload_manuscirpt: function () {
+            return this.baseUrl + 'api/Production/up_last_artFile';
+        }
+    },
+    methods: {
+        // 获取列表
+        getDate() {
+            const loading = this.$loading({
+                lock: true,
+                text: 'Loading...',
+                spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)'
+            });
+            this.$api
+                .post('api/Publish/getPublicAiticles', this.queryType)
+                .then((res) => {
+                    this.dataTable = res.data.articleList;
+                    this.Total = res.data.count;
+                    loading.close();
+                })
+                .catch((err) => {
+                    console.log(err);
+                    loading.close();
+                });
+        },
+        // 清空html
+        clearHtmlLayout() {
+            this.$confirm('You are Removing Html Proofread, do you want to continue?', 'Tips', {
+                confirmButtonText: 'Sure',
+                cancelButtonText: 'Cancle',
+                type: 'warning'
+            })
+                .then(() => {
+                    this.$api
+                        .post('api/Production/clearWebMains', {
+                            article_id: this.articleId
+                        })
+                        .then((res) => {
+                            if (res.code == 0) {
+                                this.getDate();
+                            } else {
+                                this.$message.error(res.msg);
+                            }
+                        })
+                        .catch((err) => {
+                            console.log(err);
+                        });
+                })
+                .catch(() => {});
+        },
+        // 跳转到引用编辑页面
+        goEditRefernces() {
+            // let pid = null
+            this.HtmlVisible = false;
+            //this.UpHtpFIle.refers.length > 0 ? pid = this.UpHtpFIle.refers[0].p_article_id : \
+            this.$router.push({
+                name: 'publishRefernceEditor',
+                query: {
+                    id: this.articleId,
+                    pid: this.UpHtpFIle.p_article_id
+                }
+            });
+        },
+        CancelHtml() {
+            this.HtmlVisible = false;
+            this.form.manuscirpt = '';
+            this.fileData = '';
+            this.fileL_manuscirpt = [];
+            this.createType = '1'; // html生成方式
+            this.collapseActiveNames = ['html'];
+        },
+        beforeupload_manuscirpt(file) {
+            let flieArr = file.name.split('.');
+            let fileSuffix = flieArr[flieArr.length - 1];
+            if (fileSuffix != 'docx') {
+                this.$message.error('Only word and compressed files can be uploaded(.docx)');
+                return false;
+            }
+        },
+        upSuccess_manuscirpt(res, file) {
+            if (res.code == 0) {
+                this.fileData = res.upurl;
+                this.form.manuscirpt = 'manuscirpt/' + res.upurl;
+                this.fileL_manuscirpt = [{}];
+                this.fileL_manuscirpt[0].name = 'Manuscirpt File';
+                this.fileL_manuscirpt[0].url = 'manuscirpt/' + res.upurl;
+            } else {
+                this.$message.error('service error: ' + res.msg);
+            }
+        },
+        //超出传送文件个数限制
+        alertlimit() {
+            this.$message.error('The maximum number of uploaded files has been exceeded');
+        },
+        removefilemanuscirpt(file, fileList) {
+            this.form.manuscirpt = '';
+            this.fileL_manuscirpt = [];
+        },
+        clearUploadedFile() {
+            this.$refs['uploadFile'].clearFiles();
+        },
+        uperr_coverLetter(err) {
+            this.$message.error('Upload error');
+        },
 
-						this.getStageDate();
-					})
-					.catch(err => {
-						console.log(err);
-					});
-			},
+        //初始化期刊分期
+        getJourDate() {
+            this.$api
+                .post('api/Article/getJournal', {
+                    username: this.username
+                })
+                .then((res) => {
+                    this.journalList = res;
+                    this.queryType.issn = res[0].issn;
 
-			//选择期刊
-			getJourChange() {
-				this.queryType.journal_stage_id = 0
-				this.getStageDate()
-			},
+                    this.getStageDate();
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
 
-			//选择分期
-			getStageDate() {
-				this.$api
-					.post('api/Publish/getAllStages', this.queryType)
-					.then(res => {
-						this.stageList = res.data.stages;
-						this.getDate()
-					})
-					.catch(err => {
-						console.log(err);
-					});
-			},
+        //选择期刊
+        getJourChange() {
+            this.queryType.journal_stage_id = 0;
+            this.getStageDate();
+        },
 
-			// 稿件信息完善编辑
-			EditDetail(row) {
+        //选择分期
+        getStageDate() {
+            this.$api
+                .post('api/Publish/getAllStages', this.queryType)
+                .then((res) => {
+                    this.stageList = res.data.stages;
+                    this.getDate();
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
 
-				this.EditMes.article_id = row.article_id
-				this.EditMes.title = row.title
-				this.EditMes.sort = row.sort
-				this.EditMes.journal_special_id = row.journal_special_id
+        // 稿件信息完善编辑
+        EditDetail(row) {
+            this.EditMes.article_id = row.article_id;
+            this.EditMes.title = row.title;
+            this.EditMes.sort = row.sort;
+            this.EditMes.journal_special_id = row.journal_special_id;
 
-				this.topListData(row.article_id)
+            this.topListData(row.article_id);
 
-				this.$api
-					.post('api/Publish/getJournalSpecials', this.queryType)
-					.then(res => {
-						if (res.code == 0) {
-							this.guestList = res.data.stages
-						} else {
-							this.$message.error(res.msg);
-						}
-					})
-					.catch(err => {
-						this.$message.error(err);
-					});
+            this.$api
+                .post('api/Publish/getJournalSpecials', this.queryType)
+                .then((res) => {
+                    if (res.code == 0) {
+                        this.guestList = res.data.stages;
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err);
+                });
 
-				setTimeout(() => {
-					this.EditVisible = true
-				}, 500);
+            setTimeout(() => {
+                this.EditVisible = true;
+            }, 500);
+        },
 
-			},
+        // 话题列表
+        topListData(e) {
+            this.topListName = [];
+            this.$api
+                .post('api/Publish/getArticleTopics', {
+                    article_id: e
+                })
+                .then((res) => {
+                    if (res.code == 0) {
+                        for (var r = 0; r < res.data.nowtopic.length; r++) {
+                            for (var v = 0; v < res.data.topics.length; v++) {
+                                if (res.data.nowtopic[r].topic_id == res.data.topics[v].journal_topic_id) {
+                                    res.data.topics[v].article_to_topic_id = res.data.nowtopic[r].article_to_topic_id;
 
+                                    this.topListName.push(res.data.topics[v].tname);
+                                }
+                            }
+                        }
+                        this.listopic = res.data.topics;
 
-			// 话题列表
-			topListData(e) {
-				this.topListName = []
-				this.$api
-					.post('api/Publish/getArticleTopics', {
-						'article_id': e
-					})
-					.then(res => {
-						if (res.code == 0) {
-							for (var r = 0; r < res.data.nowtopic.length; r++) {
-								for (var v = 0; v < res.data.topics.length; v++) {
-									if (res.data.nowtopic[r].topic_id == res.data.topics[v].journal_topic_id) {
-										res.data.topics[v].article_to_topic_id = res.data.nowtopic[r]
-											.article_to_topic_id;
+                        let wzht_list = [];
+                        for (var i = 0; i < res.data.nowtopic.length; i++) {
+                            wzht_list.push(res.data.nowtopic[i].topic_id + '');
+                        }
+                        this.EditMes.topic = wzht_list;
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err);
+                });
+        },
 
-										this.topListName.push(res.data.topics[v].tname)
-									}
-								};
-							};
-							this.listopic = res.data.topics
+        // 选择客座
+        saveEdit() {
+            this.$api
+                .post('api/Publish/editArticleToSpecial', this.EditMes)
+                .then((res) => {
+                    if (res.code == 0) {
+                        this.$message.success('Edit the article successfully！');
+                        this.getDate();
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err);
+                });
 
-							let wzht_list = [];
-							for (var i = 0; i < res.data.nowtopic.length; i++) {
-								wzht_list.push(res.data.nowtopic[i].topic_id + '');
-							};
-							this.EditMes.topic = wzht_list;
-						} else {
-							this.$message.error(res.msg);
-						}
-					})
-					.catch(err => {
-						this.$message.error(err);
-					});
-			},
+            this.$api
+                .post('api/Publish/editArticle', this.EditMes)
+                .then((res) => {
+                    if (res.code == 0) {
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err);
+                });
+        },
 
+        // 选择话题
+        chan_topic($event, val) {
+            if ($event == true) {
+                this.$api
+                    .post('api/Publish/addArticleToTopic', {
+                        article_id: this.EditMes.article_id,
+                        topic_id: val.journal_topic_id
+                    })
+                    .then((res) => {
+                        if (res.code == 0) {
+                            this.topListData(this.EditMes.article_id);
+                            this.$message.success('Successfully added topic!');
+                        } else {
+                            this.$message.error(res.msg);
+                        }
+                    })
+                    .catch((err) => {
+                        this.$message.error(err);
+                    });
+            } else {
+                this.$api
+                    .post('api/Publish/delArticleToTopic', {
+                        article_to_topic_id: val.article_to_topic_id
+                    })
+                    .then((res) => {
+                        if (res.code == 0) {
+                            this.topListData(this.EditMes.article_id);
+                            this.$message.success('Topic deleted successfully!');
+                        } else {
+                            this.$message.error(res.msg);
+                        }
+                    })
+                    .catch((err) => {
+                        this.$message.error(err);
+                    });
+            }
+        },
 
-			// 选择客座
-			saveEdit() {
-				this.$api
-					.post('api/Publish/editArticleToSpecial', this.EditMes)
-					.then(res => {
-						if (res.code == 0) {
-							this.$message.success('Edit the article successfully！');
-							this.getDate();
-						} else {
-							this.$message.error(res.msg);
-						}
-					})
-					.catch(err => {
-						this.$message.error(err);
-					});
+        // 关闭相关文章
+        RelatCancle() {
+            this.RelatMes.keyword = '';
+            this.alljourData = [];
+            this.selectRelate = [];
+        },
 
-				this.$api
-					.post('api/Publish/editArticle', this.EditMes)
-					.then(res => {
-						if (res.code == 0) {
+        // 弹出相关文章
+        ChoseRelated(row) {
+            this.RelatMes.title = row.title;
+            this.RelatMes.article_id = row.article_id;
+            this.SelectedRelated();
+            setTimeout(() => {
+                this.RelatVisible = true;
+            }, 300);
+        },
 
-						} else {
-							this.$message.error(res.msg);
-						}
-					})
-					.catch(err => {
-						this.$message.error(err);
-					});
-			},
+        // 获取已经选择的相关期刊
+        SelectedRelated() {
+            this.$api
+                .post('api/Publish/getArticleRelates', this.RelatMes)
+                .then((res) => {
+                    if (res.code == 0) {
+                        this.chooseData = res.data.articles;
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err);
+                });
+        },
 
-			// 选择话题
-			chan_topic($event, val) {
-				if ($event == true) {
-					this.$api
-						.post('api/Publish/addArticleToTopic', {
-							'article_id': this.EditMes.article_id,
-							'topic_id': val.journal_topic_id
-						})
-						.then(res => {
-							if (res.code == 0) {
-								this.topListData(this.EditMes.article_id);
-								this.$message.success('Successfully added topic!');
-							} else {
-								this.$message.error(res.msg);
-							}
-						})
-						.catch(err => {
-							this.$message.error(err);
-						});
-				} else {
-					this.$api
-						.post('api/Publish/delArticleToTopic', {
-							'article_to_topic_id': val.article_to_topic_id
-						})
-						.then(res => {
-							if (res.code == 0) {
-								this.topListData(this.EditMes.article_id);
-								this.$message.success('Topic deleted successfully!');
-							} else {
-								this.$message.error(res.msg);
-							}
-						})
-						.catch(err => {
-							this.$message.error(err);
-						});
-				}
-			},
-			
+        // 获取全部的相关期刊
+        NoneRelated() {
+            this.steps_jour = 0;
+            if (this.RelatMes.keyword == '') {
+                this.$message.error('Keyword cannot be empty!');
+                return;
+            }
+            const loading = this.$loading({
+                lock: true,
+                text: 'Loading...',
+                spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)'
+            });
+            this.$api
+                .post('api/Publish/getKeywordArticleOrderJournal', this.RelatMes)
+                .then((res) => {
+                    if (res.code == 0) {
+                        this.alljourData = res.data.journals;
+                        if (this.alljourData.length > 0) {
+                            this.selectRelate = this.alljourData[this.steps_jour].articles;
+                        } else {
+                            this.selectRelate = [];
+                        }
 
-			// 关闭相关文章
-			RelatCancle() {
-				this.RelatMes.keyword = ''
-				this.alljourData = []
-				this.selectRelate = []
-			},
+                        loading.close();
+                    } else {
+                        this.$message.error(res.msg);
+                        loading.close();
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err);
+                    loading.close();
+                });
+        },
 
-			// 弹出相关文章
-			ChoseRelated(row) {
-				this.RelatMes.title = row.title
-				this.RelatMes.article_id = row.article_id
-				this.SelectedRelated()
-				setTimeout(() => {
-					this.RelatVisible = true
-				}, 300);
-			},
+        // 切换期刊-相关期刊
+        steps_title(e) {
+            this.steps_jour = e;
+            this.selectRelate = this.alljourData[e].articles;
+        },
 
-			// 获取已经选择的相关期刊
-			SelectedRelated() {
-				this.$api
-					.post('api/Publish/getArticleRelates', this.RelatMes)
-					.then(res => {
-						if (res.code == 0) {
-							this.chooseData = res.data.articles
-						} else {
-							this.$message.error(res.msg);
-						}
-					})
-					.catch(err => {
-						this.$message.error(err);
-					});
-			},
+        // 鼠标状态-相关期刊
+        mouseover(item) {
+            // 移入
+            this.$set(item, 'dropdownShow', true);
+        },
+        mouseout(item) {
+            // 移除
+            this.$set(item, 'dropdownShow', false);
+        },
 
-			// 获取全部的相关期刊
-			NoneRelated() {
-				this.steps_jour = 0
-				if (this.RelatMes.keyword == '') {
-					this.$message.error('Keyword cannot be empty!');
-					return
-				}
-				const loading = this.$loading({
-					lock: true,
-					text: 'Loading...',
-					spinner: 'el-icon-loading',
-					background: 'rgba(0, 0, 0, 0.7)'
-				});
-				this.$api
-					.post('api/Publish/getKeywordArticleOrderJournal', this.RelatMes)
-					.then(res => {
-						if (res.code == 0) {
-							this.alljourData = res.data.journals;
-							if (this.alljourData.length > 0) {
-								this.selectRelate = this.alljourData[this.steps_jour].articles
-							} else {
-								this.selectRelate = []
-							}
+        // 删除-相关期刊
+        deleteTree(e) {
+            // 二次确认删除
+            this.$confirm('Are you sure you want to delete ' + e.title + '?', 'Tips', {
+                type: 'warning',
+                confirmButtonText: 'OK',
+                cancelButtonText: 'Cancel'
+            })
+                .then(() => {
+                    this.$api
+                        .post('api/Publish/delArticleRelate', {
+                            article_id: this.RelatMes.article_id,
+                            del_article_id: e
+                        })
+                        .then((res) => {
+                            if (res.code == 0) {
+                                this.$message.success('Deletion succeeded!');
+                                this.SelectedRelated();
+                            } else {
+                                this.$message.error(res.msg);
+                            }
+                        })
+                        .catch((err) => {
+                            this.$message.error(err);
+                        });
+                })
+                .catch(() => {});
+        },
 
-							loading.close();
-						} else {
-							this.$message.error(res.msg);
-							loading.close();
-						}
-					})
-					.catch(err => {
-						this.$message.error(err);
-						loading.close();
-					});
-			},
+        // 添加-相关期刊
+        addTree(e) {
+            this.$api
+                .post('api/Publish/addArticleRelate', {
+                    article_id: this.RelatMes.article_id,
+                    add_article_id: e
+                })
+                .then((res) => {
+                    if (res.code == 0) {
+                        this.$message.success('Successfully added related journal!');
+                        this.SelectedRelated();
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err);
+                });
+        },
 
-			// 切换期刊-相关期刊
-			steps_title(e) {
-				this.steps_jour = e
-				this.selectRelate = this.alljourData[e].articles
-			},
+        // 点击HTML查询数据
+        getMainsInfo(e) {
+            this.loadHtml = true;
+            this.$api
+                .post('api/Publish/getArticleMains', {
+                    article_id: e.article_id
+                })
+                .then((res) => {
+                    this.loadHtml = false;
+                    if (res.code == 0) {
+                        // console.log(res,'res')
+                        this.mains = res.data.mains;
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.loadHtml = false;
+                    this.$message.error(err);
+                });
+        },
+        async getRefersList() {
+            var data;
+            await this.$api
+                .post('api/Publish/getArticleReferences', {
+                    article_id: this.articleId
+                })
+                .then((res) => {
+                    if (res.code == 0) {
+                        data = res.data.list;
+                    } else {
+                        // this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {});
 
-			// 鼠标状态-相关期刊
-			mouseover(item) { // 移入
-				this.$set(item, 'dropdownShow', true)
-			},
-			mouseout(item) { // 移除
-				this.$set(item, 'dropdownShow', false)
-			},
+            return data;
+        },
+        // 文章html弹出层
+        async htmlContet(e) {
+            this.articleId = e.article_id;
+            this.UpHtpFIle.article_id = e.article_id;
 
-			// 删除-相关期刊
-			deleteTree(e) {
-				// 二次确认删除
-				this.$confirm('Are you sure you want to delete ' + e.title + '?', 'Tips', {
-						type: 'warning',
-						confirmButtonText: 'OK',
-						cancelButtonText: 'Cancel',
-					})
-					.then(() => {
-						this.$api
-							.post('api/Publish/delArticleRelate', {
-								'article_id': this.RelatMes.article_id,
-								'del_article_id': e
-							})
-							.then(res => {
-								if (res.code == 0) {
-									this.$message.success('Deletion succeeded!');
-									this.SelectedRelated()
-								} else {
-									this.$message.error(res.msg);
-								}
-							})
-							.catch(err => {
-								this.$message.error(err);
-							});
-					})
-					.catch(() => {});
-			},
+            this.refersList = await this.getRefersList();
+            // this.UpHtpFIle.refers = e.refers
+            this.UpHtpFIle.p_article_id = e.p_article_id;
+            this.UpHtpFIle.doi = e.doi;
+            this.UpHtpFIle.htmlfile = e.file_html;
+            this.UpHtpFIle.title = e.title;
+            this.UpHtpFIle.mains = e.mains;
+            this.UpLoadFile.article_id = e.article_id;
+            await this.getMainsInfo(e);
+            this.HtmlVisible = true;
+        },
+        // 生成html
+        // CreateHtml(){
+        // 	const loading = this.$loading({
+        // 		lock: true,
+        // 		text: 'Loading...',
+        // 		spinner: 'el-icon-loading',
+        // 		background: 'rgba(0, 0, 0, 0.7)'
+        // 	});
+        // 	this.$api
+        // 		.post('api/Production/getProductionMainsByDoi', {
+        // 			doi: this.UpHtpFIle.doi,
 
-			// 添加-相关期刊
-			addTree(e) {
-				this.$api
-					.post('api/Publish/addArticleRelate', {
-						'article_id': this.RelatMes.article_id,
-						'add_article_id': e
-					})
-					.then(res => {
-						if (res.code == 0) {
-							this.$message.success('Successfully added related journal!');
-							this.SelectedRelated()
-						} else {
-							this.$message.error(res.msg);
-						}
-					})
-					.catch(err => {
-						this.$message.error(err);
-					});
-			},
+        // 		})
+        // 		.then(res => {
+        // 			if (res.code == 0) {
+        // 				loading.close()
+        // 				this.htmlLayout()
+        // 			}
+        // 		})
+        // },
+        // 修改文章html
+        htmlLayout() {
+            const loading = this.$loading({
+                lock: true,
+                text: 'Loading...',
+                spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)'
+            });
+            this.$api
+                .post('api/Production/getProductionMainsByDoi', {
+                    doi: this.UpHtpFIle.doi,
+                    file: this.fileData
+                })
+                .then((res) => {
+                    if (res.code == 0) {
+                        loading.close();
+                        this.HtmlVisible = false;
+                        if (this.mains == '') {
+                            this.$router.push({
+                                path: 'comArtHtmlCreat',
+                                query: {
+                                    doi: this.UpHtpFIle.doi,
+                                    artID: this.UpHtpFIle.article_id
+                                }
+                            });
+                        } else {
+                            this.$router.push({
+                                path: 'comArtHtmlEdit',
+                                query: {
+                                    artID: this.UpHtpFIle.article_id
+                                }
+                            });
+                        }
+                    } else {
+                        loading.close();
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    loading.close();
+                    this.$message.error(err);
+                });
+        },
 
-			// 点击HTML查询数据
-			getMainsInfo(e){
-				this.loadHtml = true
-				this.$api
-					.post('api/Publish/getArticleMains', {
-						'article_id': e.article_id
-					})
-					.then(res => {
-						this.loadHtml = false
-						if (res.code == 0) {
-							// console.log(res,'res')	
-							this.mains = res.data.mains
-						} else {							
-							this.$message.error(res.msg);
-						}
-					})
-					.catch(err => {	
-						this.loadHtml = false					
-						this.$message.error(err);
-					});	
-			},
+        // 分页导航
+        handlePageChange(val) {
+            this.$set(this.queryType, 'pageIndex', val);
+            this.getDate();
+        },
 
-			// 文章html弹出层
-			htmlContet(e) {				
-				this.articleId = e.article_id
-				this.UpHtpFIle.article_id = e.article_id
-				this.UpHtpFIle.refers = e.refers
-				this.UpHtpFIle.p_article_id = e.p_article_id
-				this.UpHtpFIle.doi = e.doi
-				this.UpHtpFIle.htmlfile = e.file_html
-				this.UpHtpFIle.title = e.title
-				this.UpHtpFIle.mains = e.mains
-				this.UpLoadFile.article_id = e.article_id
-				this.getMainsInfo(e)
-				this.HtmlVisible = true
-				
-			},
-			// 生成html
-			// CreateHtml(){
-			// 	const loading = this.$loading({
-			// 		lock: true,
-			// 		text: 'Loading...',
-			// 		spinner: 'el-icon-loading',
-			// 		background: 'rgba(0, 0, 0, 0.7)'
-			// 	});
-			// 	this.$api
-			// 		.post('api/Production/getProductionMainsByDoi', {
-			// 			doi: this.UpHtpFIle.doi,
-						
-			// 		})
-			// 		.then(res => {
-			// 			if (res.code == 0) {
-			// 				loading.close()
-			// 				this.htmlLayout()
-			// 			}
-			// 		})
-			// },
-			// 修改文章html
-			htmlLayout() {
-				const loading = this.$loading({
-					lock: true,
-					text: 'Loading...',
-					spinner: 'el-icon-loading',
-					background: 'rgba(0, 0, 0, 0.7)'
-				});
-				this.$api
-					.post('api/Production/getProductionMainsByDoi', {
-						doi: this.UpHtpFIle.doi,
-						file: this.fileData
-					})
-					.then(res => {
-						if (res.code == 0) {
-							loading.close()
-							this.HtmlVisible = false
-							if (this.mains == '') {
-								this.$router.push({
-									path: 'comArtHtmlCreat',
-									query: {
-										doi: this.UpHtpFIle.doi,
-										artID: this.UpHtpFIle.article_id
-									}
-								});
-							} else {
-								this.$router.push({
-									path: 'comArtHtmlEdit',
-									query: {
-										artID: this.UpHtpFIle.article_id
-									}
-								});
-							}
-						} else {
-							loading.close()
-							this.$message.error(res.msg);
-						}
-					})
-					.catch(err => {
-						loading.close()
-						this.$message.error(err);
-					});
+        // 跳转页面
+        lookView(e) {
+            let urlBlan = 'https://www.tmrjournals.cn/article.html?J_num=' + e.journal_id + '&a_id=' + e.article_id;
+            window.open(urlBlan, '_blank');
+        },
 
-			},
-
-			// 分页导航
-			handlePageChange(val) {
-				this.$set(this.queryType, 'pageIndex', val);
-				this.getDate();
-			},
-
-			// 跳转页面
-			lookView(e) {
-				let urlBlan = 'https://www.tmrjournals.cn/article.html?J_num=' + e.journal_id + '&a_id=' + e
-					.article_id
-				window.open(urlBlan, '_blank')
-			},
-
-
-			// 文件上传
-			beforeupload_UpHt(file) {
-
-			},
-			uperr_UpHt(err) {
-				this.$message.error('upload error');
-			},
-			upSuccess_UpHt(res, file) {
-				return
-				if (res.code == 0) {
-					this.UpLoadFile.file = 'pdf/' + res.upurl;
-					this.$api
-						.post('api/Production/updateArticlePdf', this.UpLoadFile)
-						.then(res => {
-							if (res.code == 0) {
-								this.$message.success('Upload PDF succeeded!');
-								this.$refs.uploadUpHt.clearFiles();
-								this.UpLoadFile.file = '';
-							}
-						})
-						.catch(err => {
-							this.$message.error(err);
-						});
-				} else {
-					this.$message.error('service error：' + res.msg);
-				}
-			},
-			removefileUpHt(file, fileList) {
-				this.UpLoadFile.file = '';
-			},
-			alertlimit() {
-				this.$message.error('The maximum number of uploaded files has been exceeded');
-			},
-
-		},
-		watch:{
-			HtmlVisible:{
-				handler(newVal, oldVal) {  				
-				if(this.UpHtpFIle.mains==0 && newVal == true){ //打开赋值
-					this.collapseActiveNames.push('html')
-				}else{ // 关闭清空
-					this.collapseActiveNames = []
-				}      
-			},
-				deep: true // 可以深度检测到 person 对象的属性值的变化
-			},
-		// 	collapseActiveNames : {
-		// 	handler(newVal, oldVal) {  
-		// 		console.log(newVal, '新传入的值')
-		// 		this.$nextTick(()=>{ 
-		// 			this.oldFile = newVal.find((item)=>{item.name===''});
-		// 		})           
-		// 	},
-		// // immediate: true,
-		// 	deep: true // 可以深度检测到 person 对象的属性值的变化
-		// 	}
-		}
-	};
+        // 文件上传
+        beforeupload_UpHt(file) {},
+        uperr_UpHt(err) {
+            this.$message.error('upload error');
+        },
+        upSuccess_UpHt(res, file) {
+            return;
+            if (res.code == 0) {
+                this.UpLoadFile.file = 'pdf/' + res.upurl;
+                this.$api
+                    .post('api/Production/updateArticlePdf', this.UpLoadFile)
+                    .then((res) => {
+                        if (res.code == 0) {
+                            this.$message.success('Upload PDF succeeded!');
+                            this.$refs.uploadUpHt.clearFiles();
+                            this.UpLoadFile.file = '';
+                        }
+                    })
+                    .catch((err) => {
+                        this.$message.error(err);
+                    });
+            } else {
+                this.$message.error('service error：' + res.msg);
+            }
+        },
+        removefileUpHt(file, fileList) {
+            this.UpLoadFile.file = '';
+        },
+        alertlimit() {
+            this.$message.error('The maximum number of uploaded files has been exceeded');
+        }
+    },
+    watch: {
+        HtmlVisible: {
+            handler(newVal, oldVal) {
+                if (this.UpHtpFIle.mains == 0 && newVal == true) {
+                    //打开赋值
+                    this.collapseActiveNames.push('html');
+                } else {
+                    // 关闭清空
+                    this.collapseActiveNames = [];
+                }
+            },
+            deep: true // 可以深度检测到 person 对象的属性值的变化
+        }
+        // 	collapseActiveNames : {
+        // 	handler(newVal, oldVal) {
+        // 		console.log(newVal, '新传入的值')
+        // 		this.$nextTick(()=>{
+        // 			this.oldFile = newVal.find((item)=>{item.name===''});
+        // 		})
+        // 	},
+        // // immediate: true,
+        // 	deep: true // 可以深度检测到 person 对象的属性值的变化
+        // 	}
+    }
+};
 </script>
 
 <style scoped>
-
-.doiLink{color: #409EFF;}
+.doiLink {
+    color: #409eff;
+}
 .up_newstyle {
-		margin-left: 10px;
-	}
-.up .up_newstyle{margin-left: 0; margin-bottom: 15px;}
-	/deep/ .el-upload--text {
-		background-color: #ecf5ff;
-		border: 1px solid #b3d8ff !important;
-		padding: 0 7px;
-		/* margin-left: 10px; */
-	}
+    margin-left: 10px;
+}
+.up .up_newstyle {
+    margin-left: 0;
+    margin-bottom: 15px;
+}
+/deep/ .el-upload--text {
+    background-color: #ecf5ff;
+    border: 1px solid #b3d8ff !important;
+    padding: 0 7px;
+    /* margin-left: 10px; */
+}
 
-	.up_newstyle .el-upload__text em {
-		color: #409EFF !important;
-		font-size: 12px;
-	}
-	.handle-box {
-		margin-bottom: 18px;
-	}
+.up_newstyle .el-upload__text em {
+    color: #409eff !important;
+    font-size: 12px;
+}
+.handle-box {
+    margin-bottom: 18px;
+}
 
-	.table {
-		width: 100%;
-		font-size: 14px;
-	}
+.table {
+    width: 100%;
+    font-size: 14px;
+}
 
-	.journal_list {
-		border-right: 2px solid #e4e7ed;
-		margin: 0 8px 0 0;
-		padding: 10px 0;
-	}
+.journal_list {
+    border-right: 2px solid #e4e7ed;
+    margin: 0 8px 0 0;
+    padding: 10px 0;
+}
 
-	.journal_list>div.Tab_col {
-		color: #006699;
-		font-weight: bold;
-		border-right: 2px solid #006699;
-		margin-right: -2px;
-		letter-spacing: -0.5px;
-	}
+.journal_list > div.Tab_col {
+    color: #006699;
+    font-weight: bold;
+    border-right: 2px solid #006699;
+    margin-right: -2px;
+    letter-spacing: -0.5px;
+}
 
-	.journal_list>div>p {
-		margin-bottom: 10px;
-		padding: 8px 0;
-		cursor: pointer;
-		font-size: 15px;
-		line-height: 20px;
-	}
+.journal_list > div > p {
+    margin-bottom: 10px;
+    padding: 8px 0;
+    cursor: pointer;
+    font-size: 15px;
+    line-height: 20px;
+}
 
-	.reta_tit {
-		margin: 30px 0 30px 0;
-		font-weight: bold;
-		letter-spacing: -0.5px;
-		font-size: 15px;
-	}
+.reta_tit {
+    margin: 30px 0 30px 0;
+    font-weight: bold;
+    letter-spacing: -0.5px;
+    font-size: 15px;
+}
 
-	.reta_riqi {
-		font-weight: bold;
-		font-size: 17px;
-		margin: 18px 0 20px 15px;
-	}
+.reta_riqi {
+    font-weight: bold;
+    font-size: 17px;
+    margin: 18px 0 20px 15px;
+}
 
-	.choose_list {
-		padding: 14px 15px;
-		margin-bottom: 10px;
-		border-bottom: 1px solid #ebf5ff;
-		background-color: #f8fbff;
-		-webkit-box-shadow: 2px 30px 15px -20px #ebf5ff inset;
-		box-shadow: inset 2px 30px 15px -20px #ebf5ff;
-		position: relative;
-	}
+.choose_list {
+    padding: 14px 15px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid #ebf5ff;
+    background-color: #f8fbff;
+    -webkit-box-shadow: 2px 30px 15px -20px #ebf5ff inset;
+    box-shadow: inset 2px 30px 15px -20px #ebf5ff;
+    position: relative;
+}
 
+.selected_list {
+    padding: 15px 15px;
+    border-radius: 10px;
+    position: relative;
+}
 
-	.selected_list {
-		padding: 15px 15px;
-		border-radius: 10px;
-		position: relative;
-	}
-
-	.selected_list:nth-child(2n+1) {
-		background-color: #f8fbff;
-		/* 		-webkit-box-shadow: 2px 30px 15px -20px #ebf5ff inset;
+.selected_list:nth-child(2n + 1) {
+    background-color: #f8fbff;
+    /* 		-webkit-box-shadow: 2px 30px 15px -20px #ebf5ff inset;
 		box-shadow: inset 2px 30px 15px -20px #ebf5ff; */
-	}
+}
 
-	.selected_list:hover {
-		background-color: #ebf5ff;
-	}
+.selected_list:hover {
+    background-color: #ebf5ff;
+}
 
-	.choose_title,
-	.selected_title {
-		font-size: 14px;
-		line-height: 22px;
-		margin-right: 80px;
-	}
+.choose_title,
+.selected_title {
+    font-size: 14px;
+    line-height: 22px;
+    margin-right: 80px;
+}
 
-	.choose_title>span {
-		margin: 0 10px;
-	}
+.choose_title > span {
+    margin: 0 10px;
+}
 
-	.choose_time {
-		font-size: 15px;
-		color: #888;
-		margin: 0 0 10px 0;
-	}
+.choose_time {
+    font-size: 15px;
+    color: #888;
+    margin: 0 0 10px 0;
+}
 
-	.choose_btn,
-	.selected_btn {
-		position: absolute;
-		right: 10px;
-		top: 10px;
-	}
+.choose_btn,
+.selected_btn {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+}
 
-	.titHtml {
-		border: 2px dotted #ccc;
-		background-color: #f7f7f7;
-		border-radius: 2px;
-		padding: 0px 20px 20px 20px;
-		margin: 15px 0 0 0;
-	}
+.titHtml {
+    border: 2px dotted #ccc;
+    background-color: #f7f7f7;
+    border-radius: 2px;
+    padding: 0px 20px 20px 20px;
+    margin: 15px 0 0 0;
+}
 
-	.titHtml>div {
-		letter-spacing: .03em;
-		margin: 15px 0 0 0;
+.titHtml > div {
+    letter-spacing: 0.03em;
+    margin: 15px 0 0 0;
+}
 
+.titHtml > div > p {
+    font-size: 14px;
+    line-height: 1.4;
+    min-height: 19px;
+    color: #444;
+    word-break: break-word;
+    font-family: 'Helvetica Neue', Helvetica, Georgia, sans-serif;
+}
 
+.titHtml .MaxPicture {
+    text-align: center;
+}
 
-	}
+.titHtml .MaxPicture > img {
+    margin-bottom: 10px;
+}
 
-	.titHtml>div>p {
-		font-size: 14px;
-		line-height: 1.4;
-		min-height: 19px;
-		color: #444;
-		word-break: break-word;
-		font-family: "Helvetica Neue", Helvetica, Georgia, sans-serif;
-	}
+.titHtml .MaxPicture > font {
+    display: block;
+    margin: 0 auto;
+    font-size: 13px;
+}
 
+/deep/.htmlfile .upload-demo {
+    overflow: auto;
+}
 
+/deep/.htmlfile .upload-demo .el-upload {
+    width: 55px;
+    float: left;
+    margin-left: 5px;
+    border: none;
+    text-align: left;
+    height: 35px;
+}
 
-	.titHtml .MaxPicture {
-		text-align: center;
-	}
+/deep/.htmlfile .upload-demo .el-upload {
+    margin-left: 0 !important;
+    width: 150px !important;
+    height: auto !important;
+    text-align: center !important;
+}
 
-	.titHtml .MaxPicture>img {
-		margin-bottom: 10px;
-	}
+/deep/.htmlfile .upload-demo .el-upload__tip {
+    margin-left: 15px;
+    float: left;
+}
 
-	.titHtml .MaxPicture>font {
-		display: block;
-		margin: 0 auto;
-		font-size: 13px;
-	}
+/deep/.htmlfile .upload-demo .el-upload-list {
+    margin-top: -4px;
+    margin-left: 20px;
+    float: left;
+    width: 500px;
+    /* display: none; */
+}
 
+/* /deep/ .import.is-disabled{background: #ecf5ff !important; color: #8cc5ff !important; border-color: #d9ecff !important;} */
 
-	/deep/.htmlfile .upload-demo {
-		overflow: auto;
-	}
-
-	/deep/.htmlfile .upload-demo .el-upload {
-		width: 55px;
-		float: left;
-		margin-left: 5px;
-		border: none;
-		text-align: left;
-		height: 35px;
-	}
-
-	/deep/.htmlfile .upload-demo .el-upload {
-		margin-left: 0 !important;
-		width: 150px !important;
-		height: auto !important;
-		text-align: center !important;
-	}
-
-	/deep/.htmlfile .upload-demo .el-upload__tip {
-		margin-left: 15px;
-		float: left;
-	}
-
-	/deep/.htmlfile .upload-demo .el-upload-list {
-		margin-top: -4px;
-		margin-left: 20px;
-		float: left;
-		width: 500px;
-		/* display: none; */
-	}
-
-	/* /deep/ .import.is-disabled{background: #ecf5ff !important; color: #8cc5ff !important; border-color: #d9ecff !important;} */
-
-	/* /deep/.htmlfile .upload-demo .el-upload-list .el-upload-list__item {
+/* /deep/.htmlfile .upload-demo .el-upload-list .el-upload-list__item {
 		width: 30px !important;
 	} */
 
-	/deep/.htmlfile .upload-demo .el-upload-list .el-upload-list__item:hover {
-		cursor: pointer;
-	}
+/deep/.htmlfile .upload-demo .el-upload-list .el-upload-list__item:hover {
+    cursor: pointer;
+}
 
-	/* /deep/.htmlfile .upload-demo .el-upload-list .el-upload-list__item .el-upload-list__item-name {
+/* /deep/.htmlfile .upload-demo .el-upload-list .el-upload-list__item .el-upload-list__item-name {
 		width: 30px;
 	} */
 
-	/* /deep/.htmlfile .upload-demo .el-upload-list .el-upload-list__item .el-upload-list__item-status-label {
+/* /deep/.htmlfile .upload-demo .el-upload-list .el-upload-list__item .el-upload-list__item-status-label {
 		display: none;
 	} */
 
-	/* /deep/.htmlfile .upload-demo .el-upload-list__item:hover .el-icon-close {
+/* /deep/.htmlfile .upload-demo .el-upload-list__item:hover .el-icon-close {
 		display: none;
 	} */
-	/deep/ .table99 th{background: #e4e7ed !important; color: #777 !important;}
+/deep/ .table99 th {
+    background: #e4e7ed !important;
+    color: #777 !important;
+}
 </style>