From c423bf9c58edd8625dfcf3e127c2be4cba8dd702 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: Fri, 27 Sep 2024 11:11:23 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9A=82=E6=97=B6=E5=8E=BB=E6=8E=89=E5=88=86?=
 =?UTF-8?q?=E7=B1=BB=E7=AE=A1=E7=90=86=20=E5=A2=9E=E5=8A=A0=E6=9C=9F?=
 =?UTF-8?q?=E5=88=8A=E5=BC=95=E6=96=87=E5=88=86=E6=9E=90=20cite=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.js                              |    4 +-
 src/components/common/Sidebar.vue             |    8 +-
 src/components/common/langs/en.js             |    6 +
 src/components/common/langs/zh.js             |    8 +-
 .../page/JournalCitationAnalysis.vue          |  136 +-
 .../JournalManagement/class.vue               |  649 +++++++++
 .../JournalManagement/common.vue              |  600 ++++++++
 .../JournalManagement/index.vue               |  119 +-
 src/components/page/articleListEditor_E.vue   |   11 +-
 .../JournalCitationAnalysis/citeList.vue      | 1211 +++++++++++++++++
 10 files changed, 2637 insertions(+), 115 deletions(-)
 create mode 100644 src/components/page/JournalManagement/JournalManagement/class.vue
 create mode 100644 src/components/page/JournalManagement/JournalManagement/common.vue
 create mode 100644 src/components/page/components/JournalCitationAnalysis/citeList.vue

diff --git a/src/api/index.js b/src/api/index.js
index 0b11630..170e883 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -19,8 +19,8 @@ const service = axios.create({
 	// baseURL: 'https://submission.tmrjournals.com/', //正式 记得切换
 	// baseURL: 'http://www.tougao.com/', //测试本地 记得切换
 	// baseURL: 'http://192.168.110.110/tougao/public/index.php/',
-	// baseURL: '/api', //本地
-	baseURL: '/', //正式
+	baseURL: '/api', //本地
+	// baseURL: '/', //正式
 
 });
 
diff --git a/src/components/common/Sidebar.vue b/src/components/common/Sidebar.vue
index b6bb43e..f42727d 100644
--- a/src/components/common/Sidebar.vue
+++ b/src/components/common/Sidebar.vue
@@ -462,10 +462,10 @@ export default {
                     index: '5',
                     title: this.$t('sidebar.journalManagement'),
                     subs: [
-                        {
-                            index: 'JournalManagement',
-                            title: this.$t('sidebar.journalManagement')
-                        },
+                        // {
+                        //     index: 'JournalManagement',
+                        //     title: this.$t('sidebar.journalManagement')
+                        // },
 
                         {
                             index: 'Journal_Agreement',
diff --git a/src/components/common/langs/en.js b/src/components/common/langs/en.js
index 81aef47..60e1cff 100644
--- a/src/components/common/langs/en.js
+++ b/src/components/common/langs/en.js
@@ -88,6 +88,12 @@ const en = {
 		factor: 'Factor',
 		Sameperiod: 'Same period',
 		ArticleInfo: 'Article Information',
+		website: 'Website',
+		email: 'Email',
+		abbr: 'abbr',
+		edit: 'Edit',
+		level: 'Level',
+		editorinchief: 'Editor In Chief',
 
 	},
 
diff --git a/src/components/common/langs/zh.js b/src/components/common/langs/zh.js
index 024ad0b..9e806a9 100644
--- a/src/components/common/langs/zh.js
+++ b/src/components/common/langs/zh.js
@@ -83,7 +83,12 @@ const zh = {
 		article: '文章数量',
 		citeNum: '引用数量',
 		articleNum: '文章数量',
-		ArticleInfo: '文章信息',
+		ArticleInfo: '文章信息',	website: '网站',
+		email: '邮箱',
+		abbr: '缩写',
+		edit: '编辑',
+		level: '水平',
+		editorinchief: '总编辑',
 
 
 		info: '以下数据为', wos: 'Wos',
@@ -227,6 +232,7 @@ const zh = {
 		journalArticleCount: '期刊文章计数总结',
 		managingDirector: '总经理',
 		GroupClassification: '集团分类',
+	
 	},
 	home: {
 		authortop: '用户指南',
diff --git a/src/components/page/JournalCitationAnalysis.vue b/src/components/page/JournalCitationAnalysis.vue
index 548d2c5..2d0ac8e 100644
--- a/src/components/page/JournalCitationAnalysis.vue
+++ b/src/components/page/JournalCitationAnalysis.vue
@@ -35,9 +35,14 @@
                     align="center"
                 >
                     <template slot-scope="scope">
-                        <el-button type="primary" size="mini" @click="openDrawer(scope.row)" style="font-weight: bold">
-                            {{ scope.row.cite.month_num }}</el-button
-                        >
+                        {{ scope.row.cite.month_num }}
+
+                        <span @click="openDrawer(scope.row)" style="margin-left: 10px;cursor: pointer;color: #006699 !important;font-weight: bold">
+                            <i class="el-icon-edit"></i>  {{ $t('JournalCitationAnalysis.edit') }}
+                        </span>
+                        <!-- <el-button type="primary" size="mini" @click="openDrawer(scope.row)" style="">
+                          
+                        </el-button> -->
                         <!-- <p
                             style="padding: 0px 6px;display: inline-block;cursor: pointer; color: #409eff; background: #ecf5ff; border: 1px solid #b3d8ff"
                            
@@ -122,25 +127,45 @@
                     </el-table-column>
                     <el-table-column prop="title" :label="$t('JournalCitationAnalysis.ArticleInfo')">
                         <template slot-scope="scope">
-                            <p style="color: #333; margin-bottom: 4px">
-                                <span style="font-size: 14px; font-weight: 600">Article Tiltle : </span>
-
-                                <span style="font-size: 14px"> {{ scope.row.article_name }}</span>
-                            </p>
-                            <p>
-                                <span style="font-size: 14px; font-weight: 600">Author : </span>
-                                <span style="font-size: 14px">{{ scope.row.author }}</span>
-                            </p>
-                            <p>
-                                <span style="font-size: 13px; font-weight: 500; color: #888"
-                                    >{{ $t('paperArticleCount.Periodroll') }} :
-                                </span>
-                                <span style="font-size: 13px; color: #aaa">( {{ scope.row.vol }} )</span>
-                            </p>
                             <p>
                                 <span style="font-size: 14px; color: #006699; font-weight: 500">Doi : </span>
-                                <span style="font-size: 14px; color: #006699 !important; font-weight: 500">{{ scope.row.doi }}</span>
+                                <span style="font-size: 13px; color: #006699 !important; font-weight: 500; margin-left: 5px">{{
+                                    scope.row.doi
+                                }}</span>
                             </p>
+                            <p style="color: #333; margin-bottom: 4px">
+                                <span style="font-size: 14px; font-weight: 600">Tiltle : </span>
+
+                                <span style="font-size: 14px"> {{ scope.row.title }}</span>
+                            </p>
+
+                            <div
+                                style="
+                                    background-color: rgb(170 170 170 / 21%);
+                                    padding: 4px 10px;
+                                    box-sizing: border-box;
+                                    border-radius: 4px;
+                                "
+                            >
+                                <p style="color: #333; margin-bottom: 4px">
+                                    <!-- <span style="font-size: 14px; font-weight: 600">Tiltle : </span> -->
+
+                                    <span style="font-size: 14px"> {{ scope.row.article_name }}</span>
+                                </p>
+                                <p>
+                                    <span style="font-size: 14px; color: #888; font-weight: 500">Doi : </span>
+                                    <span style="font-size: 13px; color: #aaa !important; font-weight: 500; margin-left: 5px">{{
+                                        scope.row.article_doi
+                                    }}</span>
+
+                                    <span style="float: right">
+                                        <span style="font-size: 13px; font-weight: 500; color: #888"
+                                            >{{ $t('paperArticleCount.Periodroll') }} :
+                                        </span>
+                                        <span style="font-size: 13px; color: #aaa">( {{ scope.row.vol }} )</span>
+                                    </span>
+                                </p>
+                            </div>
                         </template>
                     </el-table-column>
                     <el-table-column :label="$t('citeList.is_wos')" width="80" align="center">
@@ -152,52 +177,31 @@
                     </el-table-column>
                     <el-table-column :label="$t('citeList.is_china')" width="80" align="center">
                         <template slot-scope="scope">
-                            <span v-if="scope.row.is_wos == 0">{{ $t('citeList.is_china0') }}</span>
-                            <p v-if="scope.row.is_wos == 1">{{ $t('citeList.yes') }}</p>
-                            <p v-if="scope.row.is_wos == 2">{{ $t('citeList.no') }}</p>
-                        </template>
-                    </el-table-column>
-                    <el-table-column :label="$t('partyRole.status')" width="100" align="center">
-                        <template slot-scope="scope">
-                            <span
-                                style="
-                                    padding: 2px 4px;
-                                    border-radius: 2px;
-                                    margin-left: 10px;
-                                    font-size: 12px;
-                                    color: #909399;
-                                    background: #f4f4f5;
-                                    border-color: #d3d4d6;
-                                    float: right;
-                                "
-                                v-if="
-                                    scope.row.state == 0 ||
-                                    scope.row.state == 1 ||
-                                    scope.row.state == 2 ||
-                                    scope.row.state == 3 ||
-                                    scope.row.state == 4 ||
-                                    scope.row.state == 5 ||
-                                    scope.row.state == 6
-                                "
-                            >
-                                <!-- {{ scope.row.link ?$t('partyRole.Published')  : '' }} -->
-                                {{ $t(`artstate.state${scope.row.state}`) }}
-                            </span>
+                            <span v-if="scope.row.is_china == 0">{{ $t('citeList.is_china0') }}</span>
+                            <p v-if="scope.row.is_china == 1">{{ $t('citeList.yes') }}</p>
+                            <p v-if="scope.row.is_china == 2">{{ $t('citeList.no') }}</p>
                         </template>
                     </el-table-column>
                     <el-table-column :label="$t('citeList.factor')" width="80" align="center">
                         <template slot-scope="scope">
-                            <span style="color: #006699; font-weight: bold">{{ scope.row.factor ? scope.row.factor : '-' }}</span>
+                            <span>{{ scope.row.factor ? scope.row.factor : '' }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="" width="80" align="center">
+                        <template slot-scope="scope">
+                            <el-button size="mini" @click="addCite(scope.row)" type="primary">Edit</el-button>
                         </template>
                     </el-table-column>
                 </el-table>
             </div>
         </el-drawer>
+        <common-cite-list ref="commonCiteList" :doiInfo="this.doiInfo" :journal="currentData" @refresh="getJournalList"></common-cite-list>
     </div>
 </template>
 
 <script>
 const jAtableY = () => import('@/components/common/journalArticleTable');
+const commonCiteList = () => import('@/components/page/components/JournalCitationAnalysis/citeList.vue');
 
 export default {
     data() {
@@ -210,13 +214,15 @@ export default {
             JournalList: [],
             JournalListLoad: false,
             currentData: {},
+            doiInfo: {},
             p_year: new Date().getFullYear() - 1,
             year: new Date().getFullYear(),
             month: new Date().getMonth() + 1
         };
     },
     components: {
-        jAtableY
+        jAtableY,
+        commonCiteList
     },
     async created() {
         this.loading = true;
@@ -225,6 +231,32 @@ export default {
         this.$forceUpdate();
     },
     methods: {
+        addCite(data) {
+            console.log('this.currentData at line 221:', this.currentData);
+            console.log('data at line 220:', data);
+            this.doiInfo = {
+                doi: data.article_doi,
+                is_china: data.is_china,
+                is_wos: data.is_wos,
+                factor: data.factor,
+                article_id: data.article_id,
+                article_title: data.article_name,
+                journal_title: data.journal_name,
+                vol: data.vol,
+                article_cite_id: data.article_cite_id
+            };
+            this.$nextTick(() => {
+                this.$refs.commonCiteList.showDialogSpecial();
+            });
+
+            // this.$router.push({
+            //     name: 'publishRefernceEditor',
+            //     query: {
+            //         id: this.articleId,
+            //         pid: this.UpHtpFIle.p_article_id
+            //     }
+            // });
+        },
         getJournalList() {
             this.JournalListLoad = true;
             this.JournalList = [];
diff --git a/src/components/page/JournalManagement/JournalManagement/class.vue b/src/components/page/JournalManagement/JournalManagement/class.vue
new file mode 100644
index 0000000..d51ae45
--- /dev/null
+++ b/src/components/page/JournalManagement/JournalManagement/class.vue
@@ -0,0 +1,649 @@
+<template>
+    <div id="app">
+        <!-- <el-button type="primary" @click="horizontal = !horizontal">切换tree方向</el-button> -->
+
+        <div style="overflow: hidden">
+            <span style="font-size: 14px;font-weight: 700; color: #606266; margin: 0 10px 0 0">{{ $t('GroupClassification.Journal') }}: </span>
+            <el-select
+                v-model="dataForm.journal_id"
+                placeholder="Please select a journal"
+                @change="handleSelectJournal"
+                style="width: 220px; margin-right: 35px"
+            >
+                <el-option v-for="item in df_jour" :label="item.title" :key="item.journal_id" :value="item.journal_id"></el-option>
+            </el-select>
+
+            <div
+                @click="toggleExpand(data, true)"
+                style="float: right; line-height: 32px; color: #006699; font-size: 12px; font-weight: 700; margin-right: 20px"
+            >
+                {{ $t('GroupClassification.ExpandAll') }}
+            </div>
+        </div>
+        <org-tree
+            id="orgTreeNode"
+            :data="data"
+            :horizontal="horizontal"
+            isSelect
+            collapsable
+            :render-content="renderContent"
+            @on-expand="onExpand"
+            @on-node-mouseover="onMouseover"
+            @on-node-mouseout="onMouseout"
+            @on-expand-mouseover="Mouseover"
+            @on-expand-mouseout="Mouseout"
+            @on-node-click="cccc"
+        >
+        </org-tree>
+        <!-- <div
+            class="floating"
+             v-show="isShowF && bd&&this.currentTreeData.id!='abc0'"
+            @mouseover="
+                () => {
+                    isShowF = true;
+                }
+            "
+            @mouseout="
+                () => {
+                    isShowF = false;
+                }
+            "
+            @mousewheel.prevent="mouseWheelDia"
+        >
+            <p @click="addOrEdit(0)">{{ $t('GroupClassification.bind') }}</p>
+
+            <p @click="addOrEdit(1)">{{ $t('GroupClassification.Unbind') }}</p>
+        </div> -->
+        <!-- 增加/编辑弹层 -->
+        <el-dialog
+            :title="isEdit == 0 ? $t('GroupClassification.add') : $t('GroupClassification.edit')"
+            v-if="dialogVisible"
+            :visible="dialogVisible"
+            @close="clearDialog"
+            show-close
+            :close-on-click-modal="false"
+            custom-class="addOrEditDia"
+            width="35%"
+        >
+            <div class="tips">
+                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm" @submit.native.prevent label-width="120px">
+                    <el-form-item :label="$t('GroupClassification.major_current')" v-if="isEdit == 0">
+                        {{ this.currentTreeData.label }}
+                    </el-form-item>
+                    <el-form-item prop="major_title" :label="$t('GroupClassification.major_title')">
+                        <el-input
+                            v-focus
+                            :placeholder="$t('GroupClassification.enter')"
+                            clearable
+                            v-model="ruleForm.major_title"
+                            @keyup.enter.native="confirm"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item prop="nickname" :label="$t('GroupClassification.nickname')">
+                        <el-input
+                            v-focus
+                            :placeholder="$t('GroupClassification.enter')"
+                            clearable
+                            v-model="ruleForm.nickname"
+                            @keyup.enter.native="confirm"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item prop="major_sort" :label="$t('GroupClassification.sort')">
+                        <el-input
+                            v-focus
+                            :placeholder="$t('GroupClassification.enter')"
+                            clearable
+                            v-model="ruleForm.major_sort"
+                            @keyup.enter.native="confirm"
+                        ></el-input>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <div class="tip-left">
+                    <el-button size="small" type="info" @click="dialogVisible = false">{{ $t('GroupClassification.cancel') }}</el-button>
+                    <el-button size="small" type="primary" @click="confirm">{{ $t('GroupClassification.submit') }}</el-button>
+                </div>
+            </span>
+        </el-dialog>
+        <!-- 删除 -->
+        <el-dialog
+            :title="$t('GroupClassification.delete')"
+            v-if="dialogVisible2"
+            :visible="dialogVisible2"
+            @close="clearDialog"
+            custom-class="delDia"
+            width="35%"
+        >
+            <div class="tips">
+                <p style="text-align: left">{{ $t('GroupClassification.deleteInfo') }} 【{{ this.currentTreeData.label }} 】?</p>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <div class="tip-left">
+                    <el-button size="mini" type="info" @click="dialogVisible2 = false">{{ $t('GroupClassification.cancel') }}</el-button>
+                    <el-button size="mini" type="primary" @click="confimdelete">{{ $t('GroupClassification.submit') }}</el-button>
+                </div>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import OrgTree from '@/components/org-tree';
+import bus from '@/components/common/bus';
+export default {
+    name: 'app',
+    components: {
+        OrgTree
+    },
+    directives: {
+        focus: {
+            inserted: function (el) {
+                el.querySelector('input').focus();
+            }
+        }
+    },
+    data() {
+        return {
+            dataForm: {},
+            edit_id: localStorage.getItem('U_id'),
+            currentJournal: {},
+            df_jour: [],
+            bd: true,
+            ruleForm: {
+                major_title: '',
+                nickname: ''
+            },
+            rules: {
+                major_title: [{ required: true, message: this.$t('GroupClassification.enter'), trigger: 'change' }]
+                // nickname: [{ required: true, message: this.$t('GroupClassification.enter'), trigger: 'change' }]
+            },
+            dialogVisible: false,
+            dialogVisible2: false,
+            isShowF: false,
+            data: {
+                id: 'abc0',
+                label: this.$t('sidebar.GroupClassification'),
+                leave: 1, // tree层级
+                children: []
+            },
+            horizontal: true,
+            collapsable: true,
+            isSelect: true,
+            isEdit: 0,
+            currentTreeData: {},
+            lastId: 11,
+            labelClassName: 'bg-white',
+            urlList: {
+                list: 'api/Major/getJournalMajorInAll',
+
+                bind: 'api/Major/addJournalMajor',
+                unbind: 'api/Major/delJournalMajor'
+            }
+        };
+    },
+    watch: {
+        dialogVisible: {
+            handler(newV, oldV) {
+                if (newV == false) {
+                    this.ruleForm = {};
+                }
+            }
+        }
+    },
+    async created() {
+        const a = this.numFormatter(9999999999);
+        console.log(a);
+        await this.getSelect();
+    },
+    async activated() {
+        const a = this.numFormatter(9999999999);
+        console.log(a);
+        await this.getSelect();
+    },
+    methods: {
+        async init(){
+            await this.getSelect();
+        },
+        // 获取下拉值
+        async getSelect() {
+            this.$api
+                .post('/api/Journal/getJournalByeditor', {
+                    user_id: this.edit_id
+                })
+                .then(async (res) => {
+                    if (res.code == 0) {
+                        this.df_jour = res.data.journals;
+                      
+                            this.dataForm.journal_id = this.df_jour[0].journal_id;
+                            this.currentJournal = this.df_jour[0];
+                            await this.getDate();
+                       
+
+                        // this.getDate();
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err);
+                });
+        },
+        async handleSelectJournal(e) {
+            var data = this.df_jour.find((v) => v.journal_id == e);
+
+            this.currentJournal = data;
+            console.log('this.currentJournal at line 221:', this.currentJournal);
+            await this.getDate();
+
+            this.$forceUpdate();
+        },
+        renameKeys(obj, oldKey, newKey) {
+            if (obj[oldKey]) {
+                obj[newKey] = obj[oldKey];
+                delete obj[oldKey];
+            }
+            for (let k in obj) {
+                if (typeof obj[k] === 'object') {
+                    this.renameKeys(obj[k], oldKey, newKey);
+                }
+            }
+        },
+        // 获取数据
+        async getDate() {
+            this.$api
+                .post(this.urlList.list, { journal_issn: this.currentJournal.issn })
+                .then(async (res) => {
+                    if (res.code == 0) {
+                        this.data.children = res.data.majors;
+
+                        await this.renameKeys(this.data.children, 'major_title', 'label');
+                        await this.toggleExpand(this.data, true); // 调用全部展开
+                        this.$forceUpdate();
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err);
+                });
+        },
+
+        // 增加千分位
+        numFormatter(num) {
+            let res = num;
+            if (num && num !== null) {
+                res = num.toString().replace(/\d+/, (n) => {
+                    return n.replace(/(\d)(?=(\d{3})+$)/g, ($1) => {
+                        return $1 + ',';
+                    });
+                });
+            }
+            return res;
+        },
+        async cccc(a, b) {
+            // console.log('a at line 274:', a);
+            console.log('b at line 270:', b);
+            // isShowF && bd
+            console.log('bd at line 272:', this.isShowF, this.bd);
+            if (this.isShowF && this.bd&&this.currentTreeData.id!='abc0') {
+                var BindInfo = b.selected == 0 ? this.$t('GroupClassification.BindInfo') : this.$t('GroupClassification.UnBindInfo');
+                this.$confirm(`${this.$t('GroupClassification.JournalBindInfo')} ${this.currentJournal.title}${BindInfo}`, '提示', {
+                    confirmButtonText: this.$t('GroupClassification.submit'),
+                   dangerouslyUseHTMLString: true,
+                    cancelButtonText: this.$t('GroupClassification.cancel'),
+                    type: 'warning'
+                })
+                    .then(() => {
+                        var url = '';
+                        if (b.selected == 1) {
+                            url = this.urlList.unbind;
+                        } else if (b.selected == 0) {
+                            url = this.urlList.bind;
+                        }
+                        url;
+                        console.log('url at line 278:', url);
+                        this.$api
+                            .post(url, {
+                                journal_issn: this.currentJournal.issn,
+                                major_id: b.major_id
+                            })
+                            .then(async (res) => {
+                                if (res.code == 0) {
+                                    this.$message({
+                                        type: 'success',
+                                        message: res.msg
+                                    });
+                                } else {
+                                    this.$message({
+                                        type: 'error',
+                                        message: res.msg
+                                    });
+                                }
+                            });
+
+                        this.$nextTick(async () => {
+                            setTimeout(async () => {
+                                await this.getDate();
+                            }, 200);
+                        });
+                    })
+                    .catch(() => {
+                        // this.$message({
+                        //     type: 'info',
+                        //     message: this.$t('GroupClassification.cancel')
+                        // });
+                    });
+            }
+        },
+        mouseWheelDia() {
+            // bugfix 鼠标移入弹层，滚动鼠标不能缩放bug
+            this.isShowF = false;
+        },
+        Mouseover() {
+            // 鼠标移入缩放icon
+            this.bd = false;
+        },
+        Mouseout() {
+            // 鼠标移出缩放icon
+            this.bd = true;
+        },
+        clearDialog() {
+            // 关闭添加/编辑/删除弹层
+            this.dialogVisible = false;
+            this.dialogVisible2 = false;
+            this.ruleForm.major_title = '';
+        },
+        addOrEdit(val) {
+            // 点击添加/编辑
+            // 新增val：0，编辑val：1
+            this.dialogVisible = true;
+            this.isEdit = val;
+            // eslint-disable-next-line eqeqeq
+            if (val == 1) {
+                // 编辑回显
+                this.ruleForm.major_title = this.currentTreeData.label;
+                this.ruleForm.major_sort = this.currentTreeData.major_sort;
+                this.ruleForm.major_id = this.currentTreeData.major_id;
+                this.ruleForm.nickname = this.currentTreeData.nickname;
+            } else {
+                this.ruleForm.pid = this.currentTreeData.major_id;
+            }
+        },
+        async confirm() {
+            // 添加/编辑的确定
+            this.$refs.ruleForm.validate(async (valid) => {
+                if (valid) {
+                    if (this.isEdit == 1) {
+                        // 编辑
+                        // this.ruleForm.major_title =
+                        // data.id = this.treeData.id;
+                        // this.currentTreeData.label = data.label;
+
+                        this.$api
+                            .post(this.urlList.edit, {
+                                major_title: this.ruleForm.major_title,
+                                major_id: this.ruleForm.major_id,
+                                major_sort: this.ruleForm.major_sort
+                            })
+                            .then(async (res) => {
+                                if (res.code == 0) {
+                                    this.$message({
+                                        type: 'success',
+                                        message: res.msg
+                                    });
+                                    this.clearDialog();
+                                } else {
+                                    this.$message({
+                                        type: 'error',
+                                        message: res.msg
+                                    });
+                                }
+                            });
+
+                        // 前端编辑数据
+
+                        // loading.close();
+                    } else {
+                        this.$api
+                            .post(this.urlList.add, {
+                                major_title: this.ruleForm.major_title,
+                                pid: this.ruleForm.pid,
+                                major_sort: this.ruleForm.major_sort
+                            })
+                            .then(async (res) => {
+                                if (res.code == 0) {
+                                    this.$message({
+                                        type: 'success',
+                                        message: res.msg
+                                    });
+                                    this.clearDialog();
+                                } else {
+                                    this.$message({
+                                        type: 'error',
+                                        message: res.msg
+                                    });
+                                }
+                            });
+                        // 添加
+                        // 前端添加数据,需要自己生成子级id,可以传数据的时候把最后一级id传过来,进行累加
+                        // data.id = this.lastId++;
+                        // // data.level = this.currentTreeData.level + 1;
+                        // data.label = this.ruleForm.major_title;
+                        // data.expand = true;
+                        // const render = (formData) => {
+                        //     formData.some((item) => {
+                        //         if (item.id === this.currentTreeData.id) {
+                        //             if (item.children) {
+                        //                 item.children.push(data);
+                        //             } else {
+                        //                 this.$set(item, 'children', [data]);
+                        //             }
+                        //         } else if (item.children) {
+                        //             render(item.children);
+                        //         }
+                        //     });
+                        // };
+                        // const arr = [this.data];
+                        // render(arr);
+                        // this.data = arr[0];
+
+                        // loading.close();
+                    }
+                    this.$nextTick(async () => {
+                        await this.getDate();
+                    });
+                } else {
+                    // loading.close();
+                }
+            });
+        },
+        del() {
+            this.dialogVisible2 = true;
+        },
+        async confimdelete() {
+            // 是否确定删除当前节点
+            // 前端删除 遍历原数据,删除匹配id数据
+            this.$api
+                .post(this.urlList.delete, {
+                    major_id: this.currentTreeData.major_id
+                })
+                .then(async (res) => {
+                    if (res.code == 0) {
+                        this.$message({
+                            type: 'success',
+                            message: res.msg
+                        });
+                        this.clearDialog();
+                    } else {
+                        this.$message({
+                            type: 'error',
+                            message: res.msg
+                        });
+                    }
+
+                    this.$nextTick(async () => {
+                        await this.getDate();
+                    });
+                });
+            // const deleteData = (data) => {
+            //     data.some((item, i) => {
+            //         if (item.id === this.currentTreeData.id) {
+            //             data.splice(i, 1);
+            //         } else if (item.children) {
+            //             deleteData(item.children);
+            //         }
+            //     });
+            // };
+            // const arr = [this.data];
+            // deleteData(arr);
+            // this.data = arr[0] ? arr[0] : {};
+            // this.dialogVisible2 = false;
+            // this.$message({
+            //     type: 'success',
+            //     message: '节点删除成功！'
+            // });
+        },
+        onMouseover(e, data) {
+            var collapse = localStorage.getItem('collapse');
+            var width = Number(e.clientX - (!collapse || collapse == 'false' ? 260 : 40));
+         
+            // 鼠标移入树节点
+            this.currentTreeData = data; // 鼠标移入，该节点的所有数据
+          
+            this.isShowF = true;
+            var floating = document.getElementsByClassName('floating')[0];
+            if(floating){
+ floating.style.left = width + 'px';
+            floating.style.top = e.clientY - 80 + 'px';
+            }
+           
+        },
+        onMouseout(e, data) {
+            // 鼠标移出树节点
+            this.isShowF = false;
+        },
+        renderContent(h, data) {
+            return data.label;
+        },
+        onExpand(e, data) {
+            // 节点展开收缩
+            // eslint-disable-next-line eqeqeq
+            if (data.leave == 1 && data.expand == true) {
+                // bugfix
+                var dom = document.getElementById('ddd');
+                (dom.style.top = '50%'), (dom.style.left = '8%');
+            }
+            if ('expand' in data) {
+                data.expand = !data.expand;
+                if (!data.expand && data.children) {
+                    this.collapse(data.children);
+                }
+            } else {
+                this.$set(data, 'expand', true);
+            }
+        },
+        collapse(list) {
+            list.forEach((child) => {
+                if (child.expand) {
+                    child.expand = false;
+                }
+
+                child.children && this.collapse(child.children);
+            });
+        },
+        toggleExpand(data, val) {
+            // 节点默认全部展开
+            var _this = this;
+            // console.log(data);
+            if (Array.isArray(data)) {
+                data.forEach(function (item) {
+                    _this.$set(item, 'expand', val);
+                    if (item.children) {
+                        _this.toggleExpand(item.children, val);
+                    }
+                });
+            } else {
+                this.$set(data, 'expand', val);
+                if (data.children) {
+                    _this.toggleExpand(data.children, val);
+                }
+            }
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.floating {
+    background: rgba(0, 0, 0, 0.7);
+    box-shadow: rgba(0, 0, 0, 0.2);
+    width: auto;
+    // height: 45px;
+    line-height: 24px;
+    // display: flex;
+    // justify-content: space-around;
+    position: absolute;
+    color: #fff;
+    border-radius: 5px;
+    box-sizing: border-box;
+    left: 0;
+    top: 0;
+    transition: all 0.3s;
+    z-index: 999;
+    font-size: 12px;
+    padding: 6px;
+    span {
+        cursor: pointer;
+    }
+}
+</style>
+<style lang="less">
+.addOrEditDia,
+.delDia {
+    padding: 14px 18px 10px 18px;
+    border-radius: 4px !important;
+    .el-dialog__header {
+        display: flex;
+        justify-content: space-between;
+        padding: 20px 0 !important;
+    }
+    .el-dialog__body {
+        padding: 0;
+        padding-top: 20px;
+        // margin-top: 37px;
+    }
+    .el-dialog__footer {
+        padding: 27px 0 9px 0 !important;
+    }
+    .el-dialog__headerbtn {
+        position: static !important;
+    }
+}
+.bg-white {
+    background-color: white;
+}
+.bg-orange {
+    background-color: orange;
+}
+.bg-gold {
+    background-color: gold;
+}
+.bg-gray {
+    background-color: gray;
+}
+.bg-lightpink {
+    background-color: lightpink;
+}
+.bg-chocolate {
+    background-color: chocolate;
+}
+.bg-tomato {
+    background-color: tomato;
+}
+.outBox {
+    height: calc(100% - 100px) !important;
+    margin-top: 10px;
+    width: calc(100% - 40px) !important;
+    overflow: auto !important;
+}
+</style>
diff --git a/src/components/page/JournalManagement/JournalManagement/common.vue b/src/components/page/JournalManagement/JournalManagement/common.vue
new file mode 100644
index 0000000..e185375
--- /dev/null
+++ b/src/components/page/JournalManagement/JournalManagement/common.vue
@@ -0,0 +1,600 @@
+<template>
+    <div id="app">
+        <!-- <el-button type="primary" @click="horizontal = !horizontal">切换tree方向</el-button> -->
+
+        <div style="padding: 20px 0; box-sizing: border-box">
+            <el-table
+                :data="JournalList"
+                class="table"
+                ref="multipleTable"
+                header-cell-class-name="table-header"
+                empty-text="New messages (0)"
+            >
+                <el-table-column type="expand" width="30">
+                    <template slot-scope="scope">
+                        <div class="tableExpand">
+                            <div class="item">
+                                <span class="title">{{ $t('JournalCitationAnalysis.abbr') }} :</span><span>{{ scope.row.abbr }}</span>
+                            </div>
+                            <div class="item">
+                                <span class="title">{{ $t('JournalCitationAnalysis.editorinchief') }} :</span
+                                ><span>{{ scope.row.editorinchief }}</span>
+                            </div>
+                            <div class="item">
+                                <span class="title">{{ $t('JournalCitationAnalysis.email') }} :</span><span>{{ scope.row.email }}</span>
+                            </div>
+                            <div class="item">
+                                <span class="title">{{ $t('JournalCitationAnalysis.website') }} :</span><span>{{ scope.row.website }}</span>
+                            </div>
+                            <div class="item">
+                                <span class="title">{{ $t('JournalCitationAnalysis.level') }} :</span><span>{{ scope.row.level }}</span>
+                            </div>
+                        </div>
+                    </template>
+                </el-table-column>
+                <!-- <el-table-column label="No." align="center" width="50">
+                    <template slot-scope="scop">
+                        {{ scop.$index + 1 }}
+                    </template>
+                    
+                </el-table-column> -->
+                <el-table-column prop="title" label="title">
+                    <template slot-scope="scope">
+                        <span style="font-weight: 700 !important; color: rgb(51, 51, 51)"> {{ scope.row.title }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="issn" width="160" label="issn"></el-table-column>
+
+                <el-table-column label=" " width="200" align="center">
+                    <template slot-scope="scope">
+                        <p
+                            @click="
+                                openJournal({
+                                    ...scope.row
+                                })
+                            "
+                            style="color: #006699 !important; cursor: pointer"
+                        >
+                            {{ $t('menu.Classificationmanagement') }}
+                        </p>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+
+        <el-drawer
+            :title="this.currentTreeData.label + '   ' + $t('GroupClassification.AssociatedJournal')"
+            :visible.sync="drawer"
+            direction="rtl"
+            :before-close="handleClose"
+            size="50%"
+        >
+            <common-class ref="commonClass" :currentJournal="currentJournal"></common-class>
+        </el-drawer>
+    </div>
+</template>
+
+<script>
+import OrgTree from '@/components/org-tree';
+import commonclass from './class.vue';
+import bus from '@/components/common/bus';
+export default {
+    name: 'app',
+    props: ['urlList'],
+    components: {
+        OrgTree,
+        commonclass
+    },
+    directives: {
+        focus: {
+            inserted: function (el) {
+                el.querySelector('input').focus();
+            }
+        }
+    },
+    data() {
+        return {
+            edit_id: localStorage.getItem('U_id'),
+            AssociatedJournalList: [],
+            JournalList: [],
+            drawer: false,
+            bd: true,
+            ruleForm: {
+                major_title: '',
+                nickname: ''
+            },
+            rules: {
+                major_title: [{ required: true, message: this.$t('GroupClassification.enter'), trigger: 'change' }]
+                // nickname: [{ required: true, message: this.$t('GroupClassification.enter'), trigger: 'change' }]
+            },
+            dialogVisible: false,
+            dialogVisible2: false,
+            isShowF: false,
+            data: {
+                id: 'abc0',
+                label: this.$t('sidebar.GroupClassification'),
+                leave: 1, // tree层级
+                children: []
+            },
+            horizontal: true,
+            collapsable: true,
+            isEdit: 0,
+            currentTreeData: {},
+            currentJournal: {},
+            lastId: 11,
+            labelClassName: 'bg-white'
+        };
+    },
+    watch: {
+        dialogVisible: {
+            handler(newV, oldV) {
+                if (newV == false) {
+                    this.ruleForm = {};
+                }
+            }
+        }
+    },
+    async created() {
+        const a = this.numFormatter(9999999999);
+        console.log(a);
+        await this.getDate();
+    },
+    async activated() {
+        await this.getDate();
+    },
+    methods: {
+        changeBind(b) {
+            var BindInfo = b.selected == 0 ? this.$t('GroupClassification.BindInfo') : this.$t('GroupClassification.UnBindInfo');
+            this.$confirm(`${this.$t('GroupClassification.JournalBindInfo')} ${b.title}${BindInfo}`, '提示', {
+                confirmButtonText: this.$t('GroupClassification.submit'),
+                dangerouslyUseHTMLString: true,
+                cancelButtonText: this.$t('GroupClassification.cancel'),
+                type: 'warning'
+            })
+                .then(() => {
+                    var url = '';
+                    if (b.selected == 1) {
+                        url = this.urlList.unbind;
+                    } else if (b.selected == 0) {
+                        url = this.urlList.bind;
+                    }
+                    url;
+                    console.log('url at line 278:', url);
+                    this.$api
+                        .post(url, {
+                            journal_issn: b.issn,
+                            major_id: this.currentTreeData.major_id
+                        })
+                        .then(async (res) => {
+                            if (res.code == 0) {
+                                this.$message({
+                                    type: 'success',
+                                    message: res.msg
+                                });
+                            } else {
+                                this.$message({
+                                    type: 'error',
+                                    message: res.msg
+                                });
+                            }
+                        });
+
+                    this.$nextTick(async () => {
+                        setTimeout(async () => {
+                            await this.getAssociatedJournalList();
+                        }, 200);
+                    });
+                })
+                .catch(() => {
+                    // this.$message({
+                    //     type: 'info',
+                    //     message: this.$t('GroupClassification.cancel')
+                    // });
+                });
+        },
+        handleClose() {
+            this.drawer = false;
+        },
+        getAssociatedJournalList() {
+            this.$api
+                .post(this.urlList.AssociatedJournalList, {
+                    major_id: this.currentTreeData.major_id
+                })
+                .then(async (res) => {
+                    if (res.code == 0) {
+                        this.AssociatedJournalList = res.data.list;
+                        console.log('this.AssociatedJournalList at line 234:', this.AssociatedJournalList);
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err);
+                });
+        },
+        openJournal(data) {
+            this.currentJournal=data
+            this.drawer = true;
+            this.$refs.commonClass.init()
+            // AssociatedJournalList
+
+            // this.getAssociatedJournalList();
+        },
+        renameKeys(obj, oldKey, newKey) {
+            if (obj[oldKey]) {
+                obj[newKey] = obj[oldKey];
+                delete obj[oldKey];
+            }
+            for (let k in obj) {
+                if (typeof obj[k] === 'object') {
+                    this.renameKeys(obj[k], oldKey, newKey);
+                }
+            }
+        },
+        // 获取数据
+        async getDate() {
+            this.$api
+                .post(this.urlList.list, {
+                    user_id: this.edit_id
+                })
+                .then(async (res) => {
+                    if (res.code == 0) {
+                        this.JournalList = res.data.journals;
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err);
+                });
+        },
+
+        // 增加千分位
+        numFormatter(num) {
+            let res = num;
+            if (num && num !== null) {
+                res = num.toString().replace(/\d+/, (n) => {
+                    return n.replace(/(\d)(?=(\d{3})+$)/g, ($1) => {
+                        return $1 + ',';
+                    });
+                });
+            }
+            return res;
+        },
+        cccc(a, b) {
+            // console.log(a);
+            // console.log(b);
+        },
+        mouseWheelDia() {
+            // bugfix 鼠标移入弹层，滚动鼠标不能缩放bug
+            this.isShowF = false;
+        },
+        Mouseover() {
+            // 鼠标移入缩放icon
+            this.bd = false;
+        },
+        Mouseout() {
+            // 鼠标移出缩放icon
+            this.bd = true;
+        },
+        clearDialog() {
+            // 关闭添加/编辑/删除弹层
+            this.dialogVisible = false;
+            this.dialogVisible2 = false;
+            this.ruleForm.major_title = '';
+        },
+        addOrEdit(val) {
+            // 点击添加/编辑
+            // 新增val：0，编辑val：1
+            this.dialogVisible = true;
+            this.isEdit = val;
+            // eslint-disable-next-line eqeqeq
+            if (val == 1) {
+                // 编辑回显
+                this.ruleForm = {
+                    major_title: this.currentTreeData.label,
+                    major_sort: this.currentTreeData.major_sort,
+                    major_id: this.currentTreeData.major_id,
+                    nickname: this.currentTreeData.nickname
+                };
+            } else {
+                this.ruleForm.pid = this.currentTreeData.major_id;
+            }
+        },
+        async confirm() {
+            // 添加/编辑的确定
+            this.$refs.ruleForm.validate(async (valid) => {
+                if (valid) {
+                    if (this.isEdit == 1) {
+                        // 编辑
+                        // this.ruleForm.major_title =
+                        // data.id = this.treeData.id;
+                        // this.currentTreeData.label = data.label;
+
+                        this.$api
+                            .post(this.urlList.edit, {
+                                major_title: this.ruleForm.major_title,
+                                major_id: this.ruleForm.major_id,
+                                major_sort: this.ruleForm.major_sort,
+                                nickname: this.ruleForm.nickname
+                            })
+                            .then(async (res) => {
+                                if (res.code == 0) {
+                                    this.$message({
+                                        type: 'success',
+                                        message: res.msg
+                                    });
+                                    this.clearDialog();
+                                } else {
+                                    this.$message({
+                                        type: 'error',
+                                        message: res.msg
+                                    });
+                                }
+                            });
+
+                        // 前端编辑数据
+
+                        // loading.close();
+                    } else {
+                        this.$api
+                            .post(this.urlList.add, {
+                                major_title: this.ruleForm.major_title,
+                                pid: this.ruleForm.pid,
+                                major_sort: this.ruleForm.major_sort,
+                                nickname: this.ruleForm.nickname
+                            })
+                            .then(async (res) => {
+                                if (res.code == 0) {
+                                    this.$message({
+                                        type: 'success',
+                                        message: res.msg
+                                    });
+                                    this.clearDialog();
+                                } else {
+                                    this.$message({
+                                        type: 'error',
+                                        message: res.msg
+                                    });
+                                }
+                            });
+                        // 添加
+                        // 前端添加数据,需要自己生成子级id,可以传数据的时候把最后一级id传过来,进行累加
+                        // data.id = this.lastId++;
+                        // // data.level = this.currentTreeData.level + 1;
+                        // data.label = this.ruleForm.major_title;
+                        // data.expand = true;
+                        // const render = (formData) => {
+                        //     formData.some((item) => {
+                        //         if (item.id === this.currentTreeData.id) {
+                        //             if (item.children) {
+                        //                 item.children.push(data);
+                        //             } else {
+                        //                 this.$set(item, 'children', [data]);
+                        //             }
+                        //         } else if (item.children) {
+                        //             render(item.children);
+                        //         }
+                        //     });
+                        // };
+                        // const arr = [this.data];
+                        // render(arr);
+                        // this.data = arr[0];
+
+                        // loading.close();
+                    }
+                    this.$nextTick(async () => {
+                        setTimeout(async () => {
+                            await this.getDate();
+                        }, 200);
+                    });
+                } else {
+                    // loading.close();
+                }
+            });
+        },
+        del() {
+            this.dialogVisible2 = true;
+        },
+        async confimdelete() {
+            // 是否确定删除当前节点
+            // 前端删除 遍历原数据,删除匹配id数据
+            this.$api
+                .post(this.urlList.delete, {
+                    major_id: this.currentTreeData.major_id
+                })
+                .then(async (res) => {
+                    if (res.code == 0) {
+                        this.$message({
+                            type: 'success',
+                            message: res.msg
+                        });
+                        this.clearDialog();
+                    } else {
+                        this.$message({
+                            type: 'error',
+                            message: res.msg
+                        });
+                    }
+
+                    this.$nextTick(async () => {
+                        setTimeout(async () => {
+                            await this.getDate();
+                        }, 200);
+                    });
+                });
+            // const deleteData = (data) => {
+            //     data.some((item, i) => {
+            //         if (item.id === this.currentTreeData.id) {
+            //             data.splice(i, 1);
+            //         } else if (item.children) {
+            //             deleteData(item.children);
+            //         }
+            //     });
+            // };
+            // const arr = [this.data];
+            // deleteData(arr);
+            // this.data = arr[0] ? arr[0] : {};
+            // this.dialogVisible2 = false;
+            // this.$message({
+            //     type: 'success',
+            //     message: '节点删除成功！'
+            // });
+        },
+        onMouseover(e, data) {
+            var collapse = localStorage.getItem('collapse');
+            var width = Number(e.clientX - (!collapse || collapse == 'false' ? 260 : 40));
+
+            // 鼠标移入树节点
+            this.currentTreeData = data; // 鼠标移入，该节点的所有数据
+
+            this.isShowF = true;
+            var floating = document.getElementsByClassName('floating')[0];
+            if (floating) {
+                floating.style.left = width + 'px';
+                floating.style.top = e.clientY - 80 + 'px';
+            }
+        },
+        onMouseout(e, data) {
+            // 鼠标移出树节点
+            this.isShowF = false;
+        },
+        renderContent(h, data) {
+            return data.label;
+        },
+        onExpand(e, data) {
+            // 节点展开收缩
+            // eslint-disable-next-line eqeqeq
+            if (data.leave == 1 && data.expand == true) {
+                // bugfix
+                var dom = document.getElementById('ddd');
+                (dom.style.top = '50%'), (dom.style.left = '8%');
+            }
+            if ('expand' in data) {
+                data.expand = !data.expand;
+                if (!data.expand && data.children) {
+                    this.collapse(data.children);
+                }
+            } else {
+                this.$set(data, 'expand', true);
+            }
+        },
+        collapse(list) {
+            list.forEach((child) => {
+                if (child.expand) {
+                    child.expand = false;
+                }
+
+                child.children && this.collapse(child.children);
+            });
+        },
+        toggleExpand(data, val) {
+            // 节点默认全部展开
+            var _this = this;
+            // console.log(data);
+            if (Array.isArray(data)) {
+                data.forEach(function (item) {
+                    _this.$set(item, 'expand', val);
+                    if (item.children) {
+                        _this.toggleExpand(item.children, val);
+                    }
+                });
+            } else {
+                this.$set(data, 'expand', val);
+                if (data.children) {
+                    _this.toggleExpand(data.children, val);
+                }
+            }
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.floating {
+    background: rgba(0, 0, 0, 0.7);
+    box-shadow: rgba(0, 0, 0, 0.2);
+    width: auto;
+    // height: 45px;
+    line-height: 24px;
+    // display: flex;
+    // justify-content: space-around;
+    position: absolute;
+    color: #fff;
+    border-radius: 5px;
+    box-sizing: border-box;
+    left: 0;
+    top: 0;
+    transition: all 0.3s;
+    z-index: 999;
+    font-size: 12px;
+    padding: 6px;
+    span {
+        cursor: pointer;
+    }
+}
+</style>
+<style lang="less">
+.addOrEditDia,
+.delDia {
+    padding: 14px 18px 10px 18px;
+    border-radius: 4px !important;
+    .el-dialog__header {
+        display: flex;
+        justify-content: space-between;
+        padding: 20px 0 !important;
+    }
+    .el-dialog__body {
+        padding: 0;
+        padding-top: 20px;
+        // margin-top: 37px;
+    }
+    .el-dialog__footer {
+        padding: 27px 0 9px 0 !important;
+    }
+    .el-dialog__headerbtn {
+        position: static !important;
+    }
+}
+.bg-white {
+    background-color: white;
+}
+.bg-orange {
+    background-color: orange;
+}
+.bg-gold {
+    background-color: gold;
+}
+.bg-gray {
+    background-color: gray;
+}
+.bg-lightpink {
+    background-color: lightpink;
+}
+.bg-chocolate {
+    background-color: chocolate;
+}
+.bg-tomato {
+    background-color: tomato;
+}
+.outBox {
+    height: calc(100% - 100px) !important;
+    margin-top: 10px;
+    width: calc(100% - 40px) !important;
+    overflow: auto !important;
+}
+.tableExpand {
+    padding: 10px 20px;
+    padding-left: 40px;
+    box-sizing: border-box;
+    .title {
+        display: inline-block;
+        // width: 140px;
+        margin-right: 10px;
+        font-weight: 700 !important;
+        color: rgb(51, 51, 51);
+    }
+    .item {
+        margin-bottom: 10px;
+    }
+}
+</style>
diff --git a/src/components/page/JournalManagement/JournalManagement/index.vue b/src/components/page/JournalManagement/JournalManagement/index.vue
index 5050b9f..f1eed49 100644
--- a/src/components/page/JournalManagement/JournalManagement/index.vue
+++ b/src/components/page/JournalManagement/JournalManagement/index.vue
@@ -2,39 +2,28 @@
     <div id="app">
         <!-- <el-button type="primary" @click="horizontal = !horizontal">切换tree方向</el-button> -->
 
-        <div style="overflow: hidden">
-            <span style="font-size: 14px;font-weight: 700; color: #606266; margin: 0 10px 0 0">{{ $t('GroupClassification.Journal') }}: </span>
-            <el-select
-                v-model="dataForm.journal_id"
-                placeholder="Please select a journal"
-                @change="handleSelectJournal"
-                style="width: 220px; margin-right: 35px"
-            >
-                <el-option v-for="item in df_jour" :label="item.title" :key="item.journal_id" :value="item.journal_id"></el-option>
-            </el-select>
+        <!-- <div class="journalList" style="overflow: hidden">
+            <span style="font-size: 14px;font-weight: 700; color: #333; margin: 0 0px 20 0">{{ this.$t('sidebar.editorialBoard3') }} </span>
+           
+            <div v-for="(v, i) in df_jour">
+                <p @click="handleSelectJournal(v)">
+                    <span
+                        class="el-tree-node__expand-icon el-icon-caret-right"
+                        style="margin-right: 10px"
+                        :style="currentJournal.journal_id == v.journal_id ? 'color: #006699;' : 'color:transparent'"
+                    ></span>
 
-            <div
-                @click="toggleExpand(data, true)"
-                style="float: right; line-height: 32px; color: #006699; font-size: 12px; font-weight: 700; margin-right: 20px"
-            >
-                {{ $t('GroupClassification.ExpandAll') }}
+                    <span :style="currentJournal.journal_id == v.journal_id ? 'color: #006699;font-weight:700;' : ''">{{ v.title }}</span>
+                </p>
             </div>
-        </div>
-        <org-tree
-            id="orgTreeNode"
-            :data="data"
-            :horizontal="horizontal"
-            isSelect
-            collapsable
-            :render-content="renderContent"
-            @on-expand="onExpand"
-            @on-node-mouseover="onMouseover"
-            @on-node-mouseout="onMouseout"
-            @on-expand-mouseover="Mouseover"
-            @on-expand-mouseout="Mouseout"
-            @on-node-click="cccc"
-        >
-        </org-tree>
+        </div> -->
+
+       
+<commonTable :urlList="urlList">
+
+</commonTable>
+        
+
         <!-- <div
             class="floating"
              v-show="isShowF && bd&&this.currentTreeData.id!='abc0'"
@@ -130,11 +119,12 @@
 
 <script>
 import OrgTree from '@/components/org-tree';
+import commonTable from './common.vue';
 import bus from '@/components/common/bus';
 export default {
     name: 'app',
     components: {
-        OrgTree
+        OrgTree,commonTable
     },
     directives: {
         focus: {
@@ -145,6 +135,10 @@ export default {
     },
     data() {
         return {
+            defaultProps: {
+                children: 'children',
+                label: 'title'
+            },
             dataForm: {},
             edit_id: localStorage.getItem('U_id'),
             currentJournal: {},
@@ -175,7 +169,7 @@ export default {
             lastId: 11,
             labelClassName: 'bg-white',
             urlList: {
-                list: 'api/Major/getJournalMajorInAll',
+                list: 'api/Journal/getJournalByeditor',
 
                 bind: 'api/Major/addJournalMajor',
                 unbind: 'api/Major/delJournalMajor'
@@ -211,11 +205,10 @@ export default {
                 .then(async (res) => {
                     if (res.code == 0) {
                         this.df_jour = res.data.journals;
-                      
-                            this.dataForm.journal_id = this.df_jour[0].journal_id;
-                            this.currentJournal = this.df_jour[0];
-                            await this.getDate();
-                       
+
+                        this.dataForm.journal_id = this.df_jour[0].journal_id;
+                        this.currentJournal = this.df_jour[0];
+                        await this.getDate();
 
                         // this.getDate();
                     } else {
@@ -227,11 +220,9 @@ export default {
                 });
         },
         async handleSelectJournal(e) {
-            var data = this.df_jour.find((v) => v.journal_id == e);
+            this.currentJournal = e;
 
-            this.currentJournal = data;
-            console.log('this.currentJournal at line 221:', this.currentJournal);
-            await this.getDate();
+            // await this.getDate();
 
             this.$forceUpdate();
         },
@@ -249,13 +240,13 @@ export default {
         // 获取数据
         async getDate() {
             this.$api
-                .post(this.urlList.list, { journal_issn: this.currentJournal.issn })
+                .post(this.urlList.list, {})
                 .then(async (res) => {
                     if (res.code == 0) {
-                        this.data.children = res.data.majors;
+                        this.data = res.data.journals;
 
-                        await this.renameKeys(this.data.children, 'major_title', 'label');
-                        await this.toggleExpand(this.data, true); // 调用全部展开
+                        // await this.renameKeys(this.data.children, 'major_title', 'label');
+                        // await this.toggleExpand(this.data, true); // 调用全部展开
                         this.$forceUpdate();
                     } else {
                         this.$message.error(res.msg);
@@ -283,11 +274,11 @@ export default {
             console.log('b at line 270:', b);
             // isShowF && bd
             console.log('bd at line 272:', this.isShowF, this.bd);
-            if (this.isShowF && this.bd&&this.currentTreeData.id!='abc0') {
+            if (this.isShowF && this.bd && this.currentTreeData.id != 'abc0') {
                 var BindInfo = b.selected == 0 ? this.$t('GroupClassification.BindInfo') : this.$t('GroupClassification.UnBindInfo');
                 this.$confirm(`${this.$t('GroupClassification.JournalBindInfo')} ${this.currentJournal.title}${BindInfo}`, '提示', {
                     confirmButtonText: this.$t('GroupClassification.submit'),
-                   dangerouslyUseHTMLString: true,
+                    dangerouslyUseHTMLString: true,
                     cancelButtonText: this.$t('GroupClassification.cancel'),
                     type: 'warning'
                 })
@@ -504,17 +495,16 @@ export default {
         onMouseover(e, data) {
             var collapse = localStorage.getItem('collapse');
             var width = Number(e.clientX - (!collapse || collapse == 'false' ? 260 : 40));
-         
+
             // 鼠标移入树节点
             this.currentTreeData = data; // 鼠标移入，该节点的所有数据
-          
+
             this.isShowF = true;
             var floating = document.getElementsByClassName('floating')[0];
-            if(floating){
- floating.style.left = width + 'px';
-            floating.style.top = e.clientY - 80 + 'px';
+            if (floating) {
+                floating.style.left = width + 'px';
+                floating.style.top = e.clientY - 80 + 'px';
             }
-           
         },
         onMouseout(e, data) {
             // 鼠标移出树节点
@@ -643,4 +633,25 @@ export default {
     width: calc(100% - 40px) !important;
     overflow: auto !important;
 }
+.journalList {
+    width: 360px;
+    height: 100%;
+    padding: 5px 10px 10px;
+    background-color: #fff;
+    box-sizing: border-box;
+    float: left;
+
+    background: #fff;
+    color: #606266;
+    font-size: 14px;
+    line-height: 30px;
+}
+.baseInfo{
+    width: calc(100% - 370px);
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+    background-color: #fff;
+    float: right;
+}
 </style>
diff --git a/src/components/page/articleListEditor_E.vue b/src/components/page/articleListEditor_E.vue
index 96bbf71..dfbbb94 100644
--- a/src/components/page/articleListEditor_E.vue
+++ b/src/components/page/articleListEditor_E.vue
@@ -50,9 +50,16 @@
                     <p v-html="scope.row.title"></p>
                 </template>
             </el-table-column>
-            <el-table-column label="Cite" width="80px" align="center">
+            <el-table-column label="Cite" width="100px" align="center">
                 <template slot-scope="scope">
-                    <p style="cursor: pointer;color:#006699 !important;" @click="goCite(scope.row)">{{ scope.row.cite_num?scope.row.cite_num.length:0 }}</p>
+                    <p style="cursor: pointer;color:#006699 !important;" @click="goCite(scope.row)">
+                        
+                        {{ scope.row.cite_num?scope.row.cite_num.length:0 }}
+                    
+                        <span style="margin-left: 4px;cursor: pointer;color: #006699 !important;font-weight: bold">
+                            <i class="el-icon-edit"></i> 
+                        </span>
+                    </p>
                 </template>
             </el-table-column>
             <el-table-column label="Html" width="100px" align="center">
diff --git a/src/components/page/components/JournalCitationAnalysis/citeList.vue b/src/components/page/components/JournalCitationAnalysis/citeList.vue
new file mode 100644
index 0000000..4a26e76
--- /dev/null
+++ b/src/components/page/components/JournalCitationAnalysis/citeList.vue
@@ -0,0 +1,1211 @@
+<template>
+    <div class="liter_ture" style="height: calc(100% - 20px)">
+        <!-- 编辑引用 -->
+        <el-dialog
+            :title="dialogTitle == 'Add' ? $t('citeList.add') : $t('citeList.edit')"
+            :visible.sync="editboxVisible"
+            width="800px"
+            :close-on-click-modal="false"
+            @close="cancelSave"
+        >
+            <div v-loading="addLoading" style="overflow: hidden">
+                <!-- <div class="yinyongPre c888" style="margin-bottom: 20px !important; color: #888; line-height: 24px; margin-top: -20px">
+                    <p>{{ $t('citeList.addInfo') }}</p>
+                </div> -->
+
+                <el-form :model="refenceForm" :rules="refenceFormrules" ref="refenceForm" label-width="150px" class="editForm mt10">
+                    <div>
+                        <el-form-item label="Doi:" prop="doi" required>
+                            <div v-if="doi_num == 1" style="display: flex; align-items: center; justify-content: space-between">
+                                <div style="width: calc(100%)">{{ refenceForm.doi }}</div>
+
+                                <!-- <el-button v-if="this.dialogTitle == 'Add'" type="primary" @click="reset()" icon="el-icon-refresh"
+                                >ReSet</el-button
+                            > -->
+                            </div>
+
+                            <!-- <div v-else>
+                            <el-input v-model="refenceForm.doi" @change="changeDoi" @blur="chekDoi()">
+                                <el-button @click="gotoFormate" slot="append">{{ $t('citeList.dialogQueryButton') }}</el-button>
+                            </el-input>
+                            <p class="zhushi">
+                                {{ $t('citeList.dialogQueryButtonInfo') }}
+                            </p>
+                        </div> -->
+                        </el-form-item>
+                    </div>
+                    <div>
+                        <!-- 中间部分 -->
+
+                        <el-form-item :label="$t('citeList.articleTitle')" required prop="article_name">
+                            <p v-if="this.doi_num == 1 && doiForm.article_name && doiForm.article_name != ''">
+                                {{ refenceForm.article_name }}
+                            </p>
+                            <el-input
+                                v-else
+                                :disabled="doiForm.article_name && doiForm.article_name != ''"
+                                v-model="refenceForm.article_name"
+                            ></el-input>
+                        </el-form-item>
+
+                        <el-form-item :label="$t('citeList.journalTitle')" required prop="journal_name">
+                            <p v-if="this.doi_num == 1 && doiForm.journal_name && doiForm.journal_name != ''">
+                                {{ refenceForm.journal_name }}
+                            </p>
+                            <el-input
+                                v-else
+                                :disabled="doiForm.journal_name && doiForm.journal_name != ''"
+                                v-model="refenceForm.journal_name"
+                            ></el-input>
+                        </el-form-item>
+                        <!-- <el-form-item :label="`${$t('citeList.author')}:`" prop="author">
+                            <p v-if="this.doi_num == 1 && doiForm.author && doiForm.author != ''">{{ refenceForm.author }}</p>
+                            <data v-else>
+                                <el-input
+                                    v-model="refenceForm.author"
+                                    placeholder="Patel NM, Stottlemyer BA, Gray MP, Boyce RD, Kane Gill SL"
+                                ></el-input>
+                                <p class="zhushi">
+                                    {{ $t('citeList.authorInfo') }}
+                                </p></data
+                            >
+                        </el-form-item> -->
+
+                        <el-form-item :label="`${$t('paperArticleCount.Periodroll')}:`" required prop="vol">
+                            <p v-if="this.doi_num == 1 && doiForm.vol && doiForm.vol != ''">{{ refenceForm.vol }}</p>
+
+                           
+                         
+                        </el-form-item>
+                        <el-form-item :label="$t('citeList.is_wos')" prop="is_wos">
+                            <el-select v-model="refenceForm.is_wos" style="width: 100%" placeholder="">
+                                <el-option v-for="item in is_wosList" :key="item.value" :label="item.title" :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item :label="$t('citeList.factor')" prop="factor">
+                            <el-input-number v-model="refenceForm.factor" :precision="2" :step="0.1" :min="0"></el-input-number>
+                        </el-form-item>
+                        <el-form-item :label="$t('citeList.is_china')" prop="is_china">
+                            <el-select v-model="refenceForm.is_china" placeholder="" style="width: 100%">
+                                <el-option
+                                    v-for="item in is_chinaList"
+                                    controls-position="right"
+                                    :key="item.value"
+                                    :label="item.title"
+                                    :value="item.value"
+                                >
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+                    </div>
+                </el-form>
+                <span slot="footer" class="dialog-footer" style="float: right">
+                    <el-button @click="cancelSave">{{ $t('citeList.cancel') }}</el-button>
+                    <el-button type="primary" @click="saveChange">{{ $t('citeList.save') }}</el-button>
+                </span>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import VueUeditorWrap from 'vue-ueditor-wrap'; // ES6 Module
+export default {
+    props: ['journal', 'doiInfo'],
+    data() {
+        return {
+            tableWidth: !localStorage.getItem('langs') || localStorage.getItem('langs') == 'en' ? 100 : 70,
+            queryForm: {},
+            is_wosList: [
+                { title: this.$t('citeList.yes'), value: 1 },
+                { title: this.$t('citeList.no'), value: 2 },
+                { title: this.$t('citeList.is_china0Info'), value: 0 }
+            ],
+            is_chinaList: [
+                { title: this.$t('citeList.yes'), value: 1 },
+                { title: this.$t('citeList.no'), value: 2 },
+                { title: this.$t('citeList.is_china0Info'), value: 0 }
+            ],
+            citeList: [],
+            doiForm: {}, //doi查询信息
+            ue: null,
+            wordText: '',
+            editorConfig: {
+                // 访问 UEditor 静态资源的根路径，可参考 https://hc199421.gitee.io/vue-ueditor-wrap/#/faq
+                UEDITOR_HOME_URL: '/UEditor/',
+                // serverUrl: "//ueditor.zhenghaochuan.com/cos",
+                serverUrl: ''
+            },
+            wordTextArr: [], // 识别出的word引用数组
+            showEditor: false,
+            dialogTitle: '',
+            showB_step: 1,
+            baseUrl: this.Common.baseUrl,
+            mediaUrl: this.Common.mediaUrl,
+            placeRef:
+                'eg:\n[1]Kagabu M, Nagasawa T, Fukagawa D, et al. Immunotherapy for Uterine Cervical Cancer. Healthcare (Basel). 2019 Sep 17;7(3):108. PMID: 31533297; PMCID: PMC6787701.\nhttps://doi.org/10.3390/healthcare7030108\n\n[2]Small W Jr, Bacon MA, Bajaj A, et al. Cervical cancer: A global health crisis. Cancer. 2017 Jul 1;123(13):2404-2412. Epub 2017 May 2. PMID: 28464289.\nhttps://doi.org/10.1002/cncr.30667\n\n[3]Cohen PA, Jhingran A, Oaknin A, et al. Cervical cancer. Lancet. 2019 Jan 12;393(10167):169-182. PMID: 30638582.\nhttps://doi.org/10.1016/S0140-6736(18)32470-X',
+            refAarray: '',
+            refProcess: 0,
+            SourceType: 'journal',
+            sourceOptions: [
+                {
+                    value: 'journal',
+                    label: 'journal'
+                },
+                {
+                    value: 'book',
+                    label: 'book'
+                },
+                {
+                    value: 'other',
+                    label: 'other'
+                }
+            ],
+            // 引用表单
+            refenceForm: {
+                doi: ''
+                // p_article_id: null,
+                // p_refer_id: null, // 当前行一行的引用序号
+                // pre_p_refer_id: null, // 上一行
+                // refer_type: '', // 类型
+                // journal_name: '',
+
+                // isbn: '',
+                // content: '',
+                // title: ''
+            },
+            refenceFormrules: {
+                doi: [{ required: false, message: this.$t('citeList.rulesDoiInfo'), trigger: 'blur' }],
+                journal_name: [{ required: true, message: this.$t('citeList.rulesJournalInfo'), trigger: 'blur' }],
+                // author: [{ required: true, message: this.$t('citeList.rulesAuthorInfo'), trigger: 'blur' }],
+                vol: [{ required: true, message: this.$t('citeList.rulesVolInfo'), trigger: 'blur' }],
+                article_name: [{ required: true, message: this.$t('citeList.rulesArticleInfo'), trigger: 'blur' }]
+
+                // isbn: [{ required: true, message: 'The ISBN cannot be empty', trigger: 'blur' }],
+                // content: [{ required: true, message: 'The Content cannot be empty', trigger: 'blur' }]
+            },
+            addLoading: false,
+            editboxVisible: false,
+            multipleSelection: [], // 多选
+            doi_num: 0,
+            urlList: {
+                list: 'api/Publish/getArticleCites',
+                refresh: 'api/Publish/refreshCite', //自动更新引用信息
+                getDoiInfo: 'api/Publish/raboDataByDoi', //doi信息
+                add: 'api/Publish/addPublicArticleCite', //添加
+                edit: 'api/Publish/editArticleCite', //编辑
+                delete: 'api/Publish/delArticleCite' //删除
+            }
+        };
+    },
+
+    created() {
+        // this.init();
+    },
+    methods: {
+        changeDoi() {
+            // this.doiForm={
+            // 	doi:''
+            // }
+            // console.log('this.doiForm at line 346:', this.doiForm,this.refenceForm)
+        },
+        init() {
+            const loading = this.$loading({
+                lock: true,
+                text: 'Loading...',
+                spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)'
+            });
+            this.$api
+                .post(this.urlList.list, {
+                    ...this.queryForm,
+                    article_id: this.$route.query.article_id
+                })
+                .then((res) => {
+                    this.citeList = res.data.list;
+                    // this.Total = res.data.count;
+                    loading.close();
+                })
+                .catch((err) => {
+                    console.log(err);
+                    loading.close();
+                });
+        },
+        handleDelete(row) {
+            this.$confirm(this.$t('citeList.deleteInfo'), this.$t('citeList.tip'), {
+                type: 'warning'
+            })
+                .then(() => {
+                    this.$api
+                        .post(this.urlList.delete, { article_cite_id: row.article_cite_id })
+                        .then((res) => {
+                            if (res.code == 0) {
+                                this.$message.success(res.msg);
+                                this.init();
+                            } else {
+                                this.$message.error(res.msg);
+                            }
+                        })
+                        .catch((err) => {
+                            this.$message.error(err);
+                        });
+                })
+                .catch(() => {});
+        },
+        refresh() {
+            const loading = this.$loading({
+                lock: true,
+                text: 'Loading...',
+                spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)'
+            });
+            this.$api
+                .post(this.urlList.refresh, { article_id: this.$route.query.article_id, journal_id: this.$route.query.journal_id })
+                .then((res) => {
+                    setTimeout(() => {
+                        this.init();
+                        loading.close();
+                    }, 200);
+                })
+                .catch((err) => {
+                    console.log(err);
+                    loading.close();
+                });
+        },
+        reset() {
+            this.showDialogSpecial();
+        },
+        showDialogSpecial() {
+            console.log('thid.doiInfo at line 281:', this.doiInfo);
+            this.doi_num = 0;
+            this.doiForm = {
+                doi: this.doiInfo.doi,
+                is_china: this.doiInfo.is_china,
+                is_wos: this.doiInfo.is_wos
+            };
+            this.refenceForm = {
+                doi: this.doiInfo.doi,
+                is_china: this.doiInfo.is_china,
+                is_wos: this.doiInfo.is_wos
+            };
+            // 拷贝文本方式添加
+            this.dialogTitle = 'Edit';
+            this.gotoFormate();
+            this.editboxVisible = true;
+            this.$nextTick(() => {
+                this.$refs['refenceForm'].clearValidate();
+            });
+        },
+        bijiao() {
+            if (this.citeList.length > 0) {
+                // 如果有值，则默认展示第二步的内容
+                this.showB_step = 2;
+            }
+        },
+
+        RefenceSelectionChange(val) {
+            // console.log(val,666666)
+            this.multipleSelection = val;
+            // console.log(this.multipleSelection,'this.multipleSelection')
+        },
+        // 取消选择
+        toggleSelection() {
+            this.multipleSelection = [];
+            this.$refs.multipleTable.clearSelection();
+        },
+        // 选中所有
+        selectAllRef() {
+            this.$refs.multipleTable.toggleAllSelection();
+        },
+
+        customColorMethod(percentage) {
+            if (percentage < 20) {
+                return '#f95f30';
+            } else if (percentage < 40) {
+                return '#f6ac3d';
+            } else if (percentage < 60) {
+                return '#e6a23c';
+            } else if (percentage < 80) {
+                return '#afbd0d';
+            } else {
+                return '#79bd0d';
+            }
+        },
+
+        // 刷新组件
+        refrashComp() {
+            this.$emit('refrashComp', true);
+        },
+        // 重新获取参考文献
+        changeRefer() {
+            this.$emit('changeRefer', true);
+        },
+        // 向上合并某一项
+        ChanFerMashUp(e) {
+            //console.log(e,'5555')
+            this.$emit('ChanFerMashUp', e);
+        },
+        // 显示修改引用
+        change(row, optitle) {
+            this.dialogTitle = optitle;
+            this.doiForm = { ...row };
+            this.refenceForm = { ...this.refenceForm, ...this.doiForm };
+            this.doi_num = 1;
+            this.editboxVisible = true;
+        },
+        // 编辑引用
+        saveChange() {
+            var journalValid = false;
+
+      
+               
+                this.addLoading = true;
+                this.$api
+                    .post(this.dialogTitle == 'Add' ? this.urlList.add : this.urlList.edit, {
+                        ...this.refenceForm,
+                        // article_id: this.doiInfo.article_id
+                    })
+                    .then((res) => {
+                        if (res.code == 0) {
+                            this.addLoading = false;
+                            this.$message.success('successed！');
+
+                            this.cancelSave();
+                          this.$emit('refresh')
+                        } else if (res.code == 1) {
+                            // doi 错误
+                            this.addLoading = false;
+                            this.$message.error(res.msg);
+                        } else {
+                            this.$message.error(res.msg);
+                        }
+                    })
+                    .catch((err) => {
+                        this.$message.error(err);
+                    });
+          
+        },
+        //  提交引用修改
+
+        // 保存新增
+
+        cancelSave() {
+            this.editboxVisible = false;
+            // refenceForm
+            this.$refs['refenceForm'].clearValidate();
+            this.$refs['refenceForm'].resetFields();
+            this.doiForm = {};
+            this.doi_num = 0;
+            this.refenceForm.doi = '';
+            this.dialogTitle = '';
+        },
+        chekDoi() {
+            this.gotoFormate();
+        },
+        // 格式化
+        gotoFormate() {
+            this.doi_num = 1;
+            var result = this.doiInfo;
+            console.log('result at line 595:', result);
+            this.doiForm = {
+                doi: this.refenceForm.doi,
+                is_china: this.refenceForm.is_china,
+                is_wos: this.refenceForm.is_wos,
+              
+                article_name: result.article_title ? result.article_title : '',
+                journal_name: result.journal_title ? result.journal_title : '',
+                vol: result.vol ? result.vol : '',
+                article_cite_id:result.article_cite_id,
+                factor:result.factor,
+            };
+
+            this.refenceForm = { ...this.refenceForm, ...this.doiForm };
+            // this.$refs['refenceForm'].validateField('doi', (callback)=>{
+            // if (this.refenceForm.doi && this.refenceForm.doi != '') {
+            //     this.addLoading = true;
+            //     this.$api
+            //         .post(this.urlList.getDoiInfo, { doi: this.refenceForm.doi })
+            //         .then((res) => {
+            //             console.log('res at line 833:', res);
+            //             this.addLoading = false;
+            //             //console.log(res)
+            //             if (res.code == 0) {
+            //                 //this.tableData = res.data.refers
+            //                 this.$nextTick(() => {
+            //                     // if (res.data.result) {
+            //                     this.doi_num = 1;
+            //                     var result = res.data;
+            //                     console.log('result at line 595:', result);
+            //                     this.doiForm = {
+            //                         doi: this.refenceForm.doi,
+            //                         is_china: this.refenceForm.is_china,
+            //     is_wos: this.refenceForm.is_wos,
+            //                         article_name: result.article_title ? result.article_title : '',
+            //                         journal_name: result.journal_title ? result.journal_title : '',
+            //                         vol: result.vol ? result.vol : '',
+            //                         author: result.author ? result.author : ''
+            //                     };
+
+            //                     this.refenceForm = { ...this.refenceForm, ...this.doiForm };
+            //                     // }
+            //                 });
+            //             } else {
+            //                 this.doi_num = 2;
+
+            //                 this.doiForm = {
+            //                     doi: this.refenceForm.doi
+            //                 };
+            //                 this.$message.error(res.msg);
+            //             }
+            //         })
+            //         .catch((e) => {
+            //             this.doi_num = 2;
+            //             this.$message.error(e.msg);
+            //             this.addLoading = false;
+            //         });
+            // } else {
+            //     //  console.log('不合格')
+            //     this.$message.error(this.$t('citeList.rulesDoiInfo'));
+            // }
+            // })
+        },
+        // 添加一行
+        addLine(row, optitle) {
+            // console.log(row)
+            this.dialogTitle = optitle;
+            // this.$refs['refenceForm'].clearValidate()
+            this.editboxVisible = true;
+            this.refenceForm.pre_p_refer_id = row.p_refer_id;
+            this.refenceForm.p_article_id = this.p_article_id;
+
+            // this.refenceLinkForm.pre_p_refer_id = row.p_refer_id
+            //this.refenceLinkForm.article_id = this.$route.query.article_id
+
+            this.$nextTick(() => {
+                this.$refs['refenceForm'].clearValidate(['doi']);
+            });
+        },
+
+        // 删除一行
+        deleteLine(row) {
+            this.$confirm('Are you sure you want to remove this reference?', 'Tips', {
+                confirmButtonText: 'Sure',
+                cancelButtonText: 'Cancel',
+                type: 'warning'
+            })
+                .then(() => {
+                    this.$api
+                        .post('api/Preaccept/delRefer', {
+                            p_refer_id: row.p_refer_id
+                        })
+                        .then((res) => {
+                            if (res.code == 0) {
+                                this.$message.success('remove successed!');
+                                this.changeRefer();
+                                // this.getRefData()
+                            } else {
+                                this.$message.error(res.msg);
+                            }
+                        })
+                        .catch((err) => {
+                            this.$message.error(err);
+                        });
+                })
+                .catch(() => {
+                    // this.$message({
+                    //     type: 'info',
+                    //     message: '已取消删除'
+                    // });
+                });
+        },
+
+        // 调整顺序
+        changeOrder(row, opName) {
+            let optitle = '';
+            opName == 'up' ? (optitle = 'Move up this line?') : (optitle = 'Move down this line?');
+            // this.$confirm(optitle, 'Tips', {
+            // confirmButtonText: 'Sure',
+            // cancelButtonText: 'Cancel',
+            // type: 'warning'
+            // }).then(() => {
+            this.$api
+                .post('api/Preaccept/sortRefer', {
+                    p_refer_id: row.p_refer_id,
+                    act: opName
+                })
+                .then((res) => {
+                    if (res.code == 0) {
+                        //	this.$message.success('successed!')
+                        this.changeRefer();
+                        // this.getRefData()
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err);
+                });
+            // this.$message({
+            //     type: 'success',
+            //     message: 'remove successed!'
+            // });
+            // }).catch(()=>{});
+        }
+    },
+    components: {
+        VueUeditorWrap
+    },
+    watch: {
+        SourceType: {
+            handler(newVal, oldVal) {
+                this.$nextTick(() => {
+                    // console.log('清空验证信息')
+                    //  this.$refs['refenceLinkForm'].clearValidate()
+                    this.$refs['refenceForm'].clearValidate();
+                    // this.$refs['refenceForm'].resetFields()     // 表单重置
+                });
+            },
+            // immediate: true,
+            deep: true // 可以深度检测到 person 对象的属性值的变化
+        }
+    }
+};
+</script>
+
+<style scoped>
+/* 隐藏编辑器底部内容 */
+/* /deep/ #edui1_bottombar{display: none;}  */
+/* 编辑器高度 */
+/* /deep/ #edui1_iframeholder{ height: 260px;}  */
+
+.wordDia {
+    max-height: 800px;
+    overflow-y: scroll;
+}
+.logtips {
+    margin-bottom: 15px;
+    color: #666;
+}
+/* .itemIndex{position: relative;} */
+.itemChanged {
+    position: absolute;
+    display: inline-block;
+    background: #006699;
+    color: #fff;
+    padding: 7px;
+    border-radius: 0 0 7px 7px;
+    left: 0;
+    top: 0;
+}
+.status {
+    display: block;
+    width: 40px;
+    height: 40px;
+    border-radius: 40px;
+    font-size: 22px;
+    line-height: 40px;
+    color: #fff;
+    text-align: center;
+}
+.status.ok {
+    background: #a7e389;
+}
+.status.warn {
+    background: #ffd192;
+}
+.status.float {
+    display: inline-block;
+}
+.doiLink {
+    color: #409eff;
+}
+.talkDialog {
+    height: 500px;
+    overflow-y: scroll;
+}
+
+.contactAuthor {
+    margin-top: 50px;
+    color: #8c939d;
+}
+.contactAuthor > p {
+    font-size: 12px;
+    margin-left: 0 !important;
+}
+.contactAuthor > p > .btnCliArt {
+    color: #409eff;
+}
+.contactAuthor > h4 {
+    margin-bottom: 10px;
+}
+.handle-box {
+    margin-bottom: 20px;
+}
+
+.title_header {
+    margin-bottom: 20px;
+}
+
+.tab_post {
+    background-color: #fafafa;
+    position: absolute;
+    left: 25px;
+    top: 60px;
+    /* width: 220px; */
+    z-index: 50;
+}
+
+.tab_post > div {
+    margin-bottom: 30px;
+    cursor: pointer;
+    position: relative;
+}
+
+.tab_post > div h5 {
+    padding: 10px 10px 0 0;
+    margin-bottom: 5px;
+    border-radius: 10px;
+    font-size: 16px;
+    color: #333;
+    font-weight: bold;
+    letter-spacing: -0.6px;
+}
+
+.tab_post > div h5 span {
+    border: 2px solid #333;
+    padding: 0 7px;
+    margin: 0 5px 0 0;
+    border-radius: 15px;
+    font-size: 12px;
+    display: inline-block;
+}
+
+.tab_post > div p {
+    margin: 0 20px 0 33px;
+    color: #999;
+    font-size: 14px;
+    line-height: 18px;
+}
+
+.tab_post > div .line {
+    top: 50px;
+    left: 11px;
+    bottom: -25px;
+    position: absolute;
+    border: 1px dashed #999;
+}
+
+.tab_post > div:nth-child(7) .line {
+    border: none;
+}
+
+.tab_post > div.P_style h5 {
+    color: #006699;
+}
+
+.tab_post > div.P_style h5 span {
+    background-color: #006699;
+    border: 2px solid #006699;
+    color: #fff;
+}
+
+.tab_post > div.P_style p {
+    color: #333;
+}
+
+.tab_post > div.P_style .line {
+    /* border-color: #006699; */
+}
+
+.scroll-item {
+    margin: 0 30px 50px 255px;
+}
+
+.bor_style_onli {
+    height: 700px;
+    overflow-y: scroll;
+    border: 2px solid #0066991a;
+    background-color: #fff;
+    border-radius: 5px;
+    padding: 20px;
+}
+
+.bor_style_onli > h4 {
+    margin: 0 0 20px 0;
+    letter-spacing: -0.5px;
+}
+
+.captcha-img.el-switch.is-disabled {
+    opacity: 1;
+}
+
+.captcha-img.el-switch.is-disabled .el-switch__core {
+    cursor: pointer;
+}
+
+.message-title {
+    cursor: pointer;
+}
+
+.guanSty {
+    min-width: 1000px;
+}
+
+.guanSty .quill-editor {
+    margin-bottom: 20px;
+    /* height: 200px; */
+}
+
+.guanSty .ql-toolbar {
+    border: 1px solid #dcdfe6 !important;
+}
+
+.guanSty .ql-container {
+    min-height: 100px !important;
+    border: 1px solid #dcdfe6 !important;
+}
+
+.guanSty .ql-editor {
+    height: 100px;
+}
+
+.guanSty .upload-demo .el-upload {
+    width: 55px;
+    float: left;
+    margin-left: 5px;
+    border: none;
+    text-align: left;
+    height: 35px;
+}
+
+.guanSty .el-upload-list {
+    margin-top: 4px;
+    margin-left: 20px;
+    float: left;
+    width: 35px;
+}
+
+.guanSty .el-upload-list .el-upload-list__item {
+    width: 30px !important;
+}
+
+.guanSty .el-upload-list .el-upload-list__item:hover {
+    cursor: pointer;
+}
+
+.guanSty .el-upload-list .el-upload-list__item .el-upload-list__item-name {
+    width: 30px;
+}
+
+.guanSty .el-upload-list .el-upload-list__item .el-upload-list__item-status-label {
+    display: none;
+}
+
+.guanSty .el-upload-list__item:hover .el-icon-close {
+    display: none;
+}
+
+.guanSty .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    width: 140px;
+    height: 140px;
+}
+
+.guanSty .avatar-uploader .el-upload:hover {
+    border-color: #409eff;
+}
+
+.guanSty .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 140px;
+    height: 140px;
+    line-height: 140px;
+    text-align: center;
+}
+
+.guanSty .avatar {
+    width: 140px;
+    height: 140px;
+    display: block;
+}
+
+.guanSty .upload-demo .el-upload-list__item:first-child {
+    margin-top: 0;
+    width: 300px;
+}
+
+.suoshu_jigou .el-checkbox__label {
+    white-space: normal;
+}
+
+.suoshu_jigou .el-checkbox__input {
+    vertical-align: top;
+    margin-top: 8px;
+}
+
+.liter_ture {
+    position: relative;
+    margin-top: 20px;
+}
+
+.chanSelLef {
+    float: left;
+    width: 24%;
+    margin: 0 50px 0 0;
+}
+
+.chanSelLef > p {
+    font-size: 14px;
+    color: #333;
+    margin: 10px 0 30px 0;
+    line-height: 22px;
+}
+
+.chanSelLef > div {
+    margin: 0 0 20px 0;
+}
+
+.chanSelLef > div > h3 {
+    font-size: 14px;
+    letter-spacing: -0.5px;
+    color: #999;
+}
+
+.chanSelLef > div > h3 > span {
+    color: #fff;
+    background-color: #999;
+    padding: 2px 6px;
+    margin: 0 10px 0 0;
+}
+
+.chanSelLef > div > div > p {
+    font-size: 14px;
+    color: #333;
+    margin: 10px 0 0 32px;
+    line-height: 24px;
+}
+
+.chanSelLef > div.C_style > h3 {
+    color: #006699;
+}
+
+.chanSelLef > div.C_style > h3 > span {
+    background-color: #006699;
+}
+
+.chanFerAll {
+    /* float: left; */
+    position: relative;
+    width: 100%;
+}
+
+.chanFerAll .chanFerBtn {
+    cursor: pointer;
+}
+
+.chanFerAll .ref_list:nth-child(2n) {
+}
+
+.chanFerAll .ref_list:nth-child(2n + 1) {
+    background-color: #ecf5ff;
+}
+
+.ref_list {
+    padding: 20px;
+    position: relative;
+}
+
+.ref_list > b {
+    position: absolute;
+    top: 5px;
+    left: 10px;
+    font-size: 12px;
+}
+
+.ref_list > i {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 16px;
+    color: #006699;
+    cursor: pointer;
+}
+
+.ref_list > div:nth-child(1) {
+    margin: 0 0 15px 0;
+}
+
+.ref_list > div:nth-child(1) input {
+}
+
+.ref_list > div:nth-child(1) button {
+    float: right;
+}
+
+.ref_list > div:nth-child(2) {
+    margin: 0 0 15px 0;
+}
+
+.ref_list > div.BG_yell {
+    background-color: #fdf3e3;
+    padding: 15px 0;
+}
+
+.RefProBar {
+    position: absolute;
+    background: rgba(0, 0, 0, 0.7);
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.RefProBar > div {
+    width: 76%;
+    position: absolute;
+    top: 40%;
+    left: 12%;
+}
+
+.RefProBar > div > p {
+    color: #fff;
+    margin: 20px 0 0 0;
+}
+
+.RefProBar > div > p > img {
+    width: 30px;
+    vertical-align: middle;
+    margin: 0 10px 0 5px;
+}
+
+.RefProBar > div > p > span {
+    font-size: 18px;
+}
+
+.upload-demo_6 {
+    overflow: auto;
+}
+
+.upload-demo_6 .el-upload {
+    margin-left: 0 !important;
+    width: 150px !important;
+    height: auto !important;
+    text-align: center !important;
+}
+
+.upload-demo_6 .el-upload__tip {
+    margin-left: 15px;
+    float: left;
+}
+
+.typeA_MTxt > div > div {
+    position: relative;
+    border-bottom: 1px solid #d6e5ec;
+    padding: 10px 0 12px 0;
+}
+
+.typeA_MTxt > div > div .el-button {
+    position: absolute;
+    right: 5px;
+    top: -1px;
+}
+
+.typeA_MTxt > h5 {
+    margin: 25px 0 15px 0;
+    line-height: 18px;
+    font-size: 13px;
+    color: #bbb;
+    font-weight: 400;
+}
+
+.bor_style_onli .load_pdf {
+    margin-bottom: 20px;
+}
+
+.bor_style_onli .load_pdf > img {
+    vertical-align: sub;
+    margin: 0 15px 0 0;
+}
+
+.bor_style_onli .load_pdf a i:hover {
+    color: #006699 !important;
+    transform: scale(1.3);
+}
+
+.con_firm {
+    font-size: 14px;
+    line-height: 28px;
+}
+
+.con_firm b {
+    margin-left: 5px;
+}
+
+.con_firm i {
+    font-size: 18px;
+    margin-right: 5px;
+    vertical-align: text-bottom;
+}
+
+.aMesage {
+    font-size: 14px;
+    font-family: 'Helvetica Neue', Helvetica, Georgia, sans-serif;
+    word-break: break-all;
+}
+
+.aMes_typ {
+    line-height: 35px;
+    border-bottom: 1px solid #f1f1f1;
+    color: #7f0202;
+    font-weight: bold;
+}
+
+.aMes_tit {
+    color: #222;
+    font-weight: bold;
+    margin-top: 8px;
+    line-height: 20px;
+    font-family: 'Helvetica Neue', Helvetica, Georgia, sans-serif;
+}
+
+.aMes_autor {
+    margin-top: 5px;
+    font-size: 15px;
+    font-family: Calibri;
+}
+
+.aMes_doi {
+    margin-top: 8px;
+}
+
+.aMes_doi span {
+    margin-left: 20px;
+}
+
+.aMes_asbimg {
+    margin-top: 20px;
+}
+
+.aMes_asbimg img {
+    float: left;
+    width: 290px;
+}
+
+.aMes_asbimg div {
+    float: left;
+    font-family: Calibri;
+    width: 430px;
+    padding-left: 30px;
+}
+
+.aArticle {
+    font-size: 14px;
+    font-family: 'Helvetica Neue', Helvetica, Georgia, sans-serif;
+    word-break: break-all;
+}
+
+.aArt_doi {
+}
+
+.aArt_tit {
+    font-size: 16px;
+    color: #333333;
+    font-weight: bold;
+    margin: 20px 0 15px 0;
+    line-height: 24px;
+}
+
+.aArt_autor {
+    margin-top: 5px;
+    font-size: 15px;
+    font-family: Calibri;
+}
+
+.aArt_autor img {
+    width: 13px;
+    margin-left: 3px;
+}
+
+.aArt_jigou {
+    margin-top: 10px;
+    line-height: 20px;
+    font-family: Calibri;
+}
+
+.aArt_abst {
+    margin-top: 30px;
+}
+
+.aArt_abst .titTop {
+    border-bottom: 1px solid #ddd;
+    margin-bottom: 20px;
+}
+
+.zhushi {
+    color: #999;
+    font-size: 12px;
+}
+.aArt_abst .titTop b {
+    font-weight: normal;
+    display: inline-block;
+    padding: 8px 10px;
+    border: 1px solid transparent;
+    margin-bottom: -1px;
+    border-radius: 4px 4px 0 0;
+    cursor: pointer;
+}
+
+.aArt_abst .titTop b.Tab_col {
+    border: 1px solid #ddd;
+    border-bottom-color: #fff;
+}
+
+.aArt_abst .titHtml {
+    letter-spacing: 0.03em;
+    margin: 15px 10px 0 10px;
+    color: #444;
+    font-size: 15px;
+    line-height: 1.4;
+    word-break: break-word;
+}
+
+.aArt_abst > p {
+    margin: 25px 10px 0 10px;
+    text-align: justify;
+    color: #666;
+    font-size: 15px;
+    line-height: 1.4;
+    /* text-indent: 2.6rem; */
+    word-break: break-word;
+}
+
+.aArt_abst .titHtml .MaxPicture {
+    text-align: center;
+}
+
+.aArt_abst .titHtml .MaxPicture > img {
+    margin-bottom: 10px;
+}
+
+.aArt_abst .titHtml .MaxPicture > font {
+    display: block;
+    margin: 0 auto;
+    font-size: 13px;
+}
+.refTable th {
+    background: red !important;
+    color: #666;
+}
+.topBtnBox.btns {
+    margin-bottom: 20px;
+}
+.bottomBtnBox.btns {
+    margin-top: 20px;
+}
+</style>