Files
tougao_web/src/components/page/editorialBoardList.vue
2023-09-20 11:18:12 +08:00

1206 lines
40 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item>
<i class="el-icon-user"></i> Editorial Board List
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container">
<el-table :data="tableData_0" border stripe class="table nullTable" ref="multipleTable"
header-cell-class-name="table-header" empty-text="New messages (0)">
<el-table-column prop="realname" label="Name"></el-table-column>
<el-table-column prop="technical" label="Professional Title" width="150px" align="center"></el-table-column>
<el-table-column prop="field" label="Field" align="center"></el-table-column>
<el-table-column label="Contributions" align="center"></el-table-column>
<el-table-column label="Ghindex" width="110px" align="center"></el-table-column>
<el-table-column label="Wosindex" width="110px" align="center"></el-table-column>
<el-table-column prop="remark" label="Remark" align="center"></el-table-column>
<!-- <el-table-column label="" width="110px" align="center"></el-table-column>
<el-table-column label="活跃度" width="110px" align="center"></el-table-column> -->
<!-- <el-table-column label="Remarks" width="180"></el-table-column> -->
<el-table-column label="" width="150px" align="center"></el-table-column>
</el-table>
<p class="shen_fen" style="margin-top: 0;" v-if="tableData_A.length!=0">Editor-in-Chief</p>
<el-table :data="tableData_A" border stripe class="table" ref="multipleTable"
header-cell-class-name="table-header" empty-text="New messages (0)" :show-header="false"
v-if="tableData_A.length!=0">
<el-table-column prop="realname" label="name">
<template slot-scope="scope">
<p @click="perSonnel(scope.row.user_id)" class="perSonGo">{{scope.row.realname}}</p>
</template>
</el-table-column>
<el-table-column prop="technical" label="technical" width="150px" align="center">
<!-- <template slot-scope="scope">
<p v-html="colorIndex(scope.row.wos_index,scope.row.wos_time)"></p>
</template> -->
</el-table-column>
<el-table-column prop="field" label="field" align="center">
<!-- <template slot-scope="scope">
<p v-html="colorIndex(scope.row.google_index,scope.row.google_time)"></p>
</template> -->
</el-table-column>
<el-table-column label="Contributions" align="center">
<template slot-scope="scope">
<div class="flexbox">
<div>Articles:
<em v-if="scope.row.articles.length > 0">{{scope.row.articles.length}}</em><em v-else>0</em>
/
<em v-if="scope.row.articles_all.length > 0">{{scope.row.articles_all.length}}</em><em v-else>0</em>
</div>
<div>Reviewes: <em v-if="scope.row.reviewes.length > 0">{{scope.row.reviewes.length}}</em><em v-else>0</em></div>
</div>
</template>
</el-table-column>
<el-table-column prop="ghindex" label="H-Google" width="110px" align="center">
<template slot-scope="scope">
<p v-html="colorIndex(scope.row.google_index,scope.row.google_time)"></p>
</template>
</el-table-column>
<el-table-column prop="wosindex" label="wosindex" width="110px" align="center">
<template slot-scope="scope">
<p v-html="colorIndex(scope.row.wos_index,scope.row.wos_time)"></p>
</template>
</el-table-column>
<el-table-column prop="remark" label="Remark" align="center">
<template slot-scope="scope">
<div style="margin-bottom: 5px;" v-if="scope.row.remark != ''">{{scope.row.remark}}</div>
<div>
<el-button v-if="scope.row.remark != ''" size="mini" type="primary" plain icon="el-icon-edit"
@click="BoxRemark(scope.row)"> Edit Remark</el-button>
<el-button v-else size="mini" type="primary" plain icon="el-icon-edit"
@click="BoxRemark(scope.row)"> Add Remark</el-button>
</div>
</template>
</el-table-column>
<el-table-column label="" width="150px" align="center">
<template slot-scope="scope">
<el-button size="mini" type="primary" plain icon="el-icon-edit"
@click="perSonnel(scope.row.user_id)">User Edit</el-button>
<!-- <el-button size="mini" type="primary" plain icon="el-icon-edit"
@click="bhandleEdit(scope.$index, scope.row)">Board Edit</el-button> -->
<!-- <el-button size="mini" type="danger" plain icon="el-icon-delete" style="margin-top: 10px;"
@click="handleDelete(scope.$index, scope.row)">Delete</el-button> -->
</template>
</el-table-column>
</el-table>
<p class="shen_fen" v-if="tableData_B.length!=0">Vice Editor-in-Chief</p>
<el-table :data="tableData_B" border stripe class="table" ref="multipleTable"
header-cell-class-name="table-header" empty-text="New messages (0)" :show-header="false"
v-if="tableData_B.length!=0">
<el-table-column prop="realname" label="name">
<template slot-scope="scope">
<p @click="perSonnel(scope.row.user_id)" class="perSonGo">{{scope.row.realname}}</p>
</template>
</el-table-column>
<el-table-column prop="technical" label="technical" width="150px" align="center">
<!-- <template slot-scope="scope">
<p v-html="colorIndex(scope.row.wos_index,scope.row.wos_time)"></p>
</template> -->
</el-table-column>
<el-table-column prop="field" label="field" align="center">
<!-- <template slot-scope="scope">
<p v-html="colorIndex(scope.row.google_index,scope.row.google_time)"></p>
</template> -->
</el-table-column>
<el-table-column label="Contributions" align="center">
<template slot-scope="scope">
<div class="flexbox">
<div>Articles: <em v-if="scope.row.articles.length > 0">{{scope.row.articles.length}}</em><em v-else>0</em> /
<em v-if="scope.row.articles_all.length > 0">{{scope.row.articles_all.length}}</em><em v-else>0</em></div>
<div>Reviewes: <em v-if="scope.row.reviewes.length > 0">{{scope.row.reviewes.length}}</em><em v-else>0</em></div>
</div>
</template>
</el-table-column>
<el-table-column prop="ghindex" label="H-Google" width="110px" align="center">
<template slot-scope="scope">
<p v-html="colorIndex(scope.row.google_index,scope.row.google_time)"></p>
</template>
</el-table-column>
<el-table-column prop="wosindex" label="wosindex" width="110px" align="center">
<template slot-scope="scope">
<p v-html="colorIndex(scope.row.wos_index,scope.row.wos_time)"></p>
</template>
</el-table-column>
<el-table-column prop="remark" label="Remark" align="center">
<template slot-scope="scope">
<div style="margin-bottom: 5px;" v-if="scope.row.remark != ''">{{scope.row.remark}}</div>
<div>
<el-button v-if="scope.row.remark != ''" size="mini" type="primary" plain icon="el-icon-edit"
@click="BoxRemark(scope.row)"> Edit Remark</el-button>
<el-button v-else size="mini" type="primary" plain icon="el-icon-edit"
@click="BoxRemark(scope.row)"> Add Remark</el-button>
</div>
</template>
</el-table-column>
<el-table-column label="" width="150" align="center">
<template slot-scope="scope">
<el-button size="mini" type="primary" plain icon="el-icon-edit"
@click="perSonnel(scope.row.user_id)">User Edit</el-button>
<!-- <el-button size="mini" type="primary" plain icon="el-icon-edit"
@click="bhandleEdit(scope.$index, scope.row)">Board Edit</el-button> -->
<!-- <el-button size="mini" type="danger" plain icon="el-icon-delete" style="margin-top: 10px;"
@click="handleDelete(scope.$index, scope.row)">Delete</el-button> -->
</template>
</el-table-column>
</el-table>
<p class="shen_fen" v-if="tableData_C.length!=0">Editorial Board Members</p>
<div v-if="tableData_C[0]">
<el-table :data="tableData_C" border stripe class="table" ref="multipleTable" :show-header="false"
header-cell-class-name="table-header" empty-text="New messages (0)" style="margin-bottom: 20px;">
<el-table-column prop="realname" label="name">
<template slot-scope="scope">
<p @click="perSonnel(scope.row.user_id)" class="perSonGo">{{scope.row.realname}}</p>
</template>
</el-table-column>
<el-table-column prop="technical" label="technical" width="150px" align="center">
<!-- <template slot-scope="scope">
<p v-html="colorIndex(scope.row.wos_index,scope.row.wos_time)"></p>
</template> -->
</el-table-column>
<el-table-column prop="field" label="field" align="center">
<!-- <template slot-scope="scope">
<p v-html="colorIndex(scope.row.google_index,scope.row.google_time)"></p>
</template> -->
</el-table-column>
<el-table-column label="Contributions" align="center">
<template slot-scope="scope">
<div class="flexbox">
<div>Articles: <em v-if="scope.row.articles.length > 0">{{scope.row.articles.length}}</em><em v-else>0</em> /
<em v-if="scope.row.articles_all.length > 0">{{scope.row.articles_all.length}}</em><em v-else>0</em></div>
<div>Reviewes: <em v-if="scope.row.reviewes.length > 0">{{scope.row.reviewes.length}}</em><em v-else>0</em></div>
</div>
</template>
</el-table-column>
<el-table-column prop="ghindex" label="H-Google" width="110px" align="center">
<template slot-scope="scope">
<p v-html="colorIndex(scope.row.google_index,scope.row.google_time)"></p>
</template>
</el-table-column>
<el-table-column prop="wosindex" label="wosindex" width="110px" align="center">
<template slot-scope="scope">
<p v-html="colorIndex(scope.row.wos_index,scope.row.wos_time)"></p>
</template>
</el-table-column>
<el-table-column prop="remark" label="Remark" align="center">
<template slot-scope="scope">
<div style="margin-bottom: 5px;" v-if="scope.row.remark != ''">{{scope.row.remark}}</div>
<div>
<el-button v-if="scope.row.remark != ''" size="mini" type="primary" plain icon="el-icon-edit"
@click="BoxRemark(scope.row)"> Edit Remark</el-button>
<el-button v-else size="mini" type="primary" plain icon="el-icon-edit"
@click="BoxRemark(scope.row)"> Add Remark</el-button>
</div>
</template>
</el-table-column>
<el-table-column label="" width="150px" align="center">
<template slot-scope="scope">
<el-button size="mini" type="primary" plain icon="el-icon-edit"
@click="perSonnel(scope.row.user_id)">User Edit</el-button>
<!-- <el-button size="mini" type="primary" plain icon="el-icon-edit"
@click="bhandleEdit(scope.$index, scope.row)">Board Edit</el-button> -->
<!-- <el-button size="mini" type="danger" plain icon="el-icon-delete" style="margin-top: 10px;"
@click="handleDelete(scope.$index, scope.row)">Delete</el-button> -->
</template>
</el-table-column>
</el-table>
</div>
<div v-else>
<!-- 有分组时 -->
<div>
<div v-for="(item,key1) of tableData_C" :key="key1">
<div v-if="key1 == 'nogroup'">
<!-- 显示无分组 -->
<el-table :data="item" border stripe class="table" ref="multipleTable" :show-header="false"
header-cell-class-name="table-header" empty-text="New messages (0)" style="margin-bottom: 20px;">
<el-table-column prop="realname" label="name">
<template slot-scope="scope">
<p @click="perSonnel(scope.row.user_id)" class="perSonGo">{{scope.row.realname}}</p>
</template>
</el-table-column>
<el-table-column prop="technical" label="technical" width="150px" align="center">
<!-- <template slot-scope="scope">
<p v-html="colorIndex(scope.row.wos_index,scope.row.wos_time)"></p>
</template> -->
</el-table-column>
<el-table-column prop="field" label="field" align="center">
<!-- <template slot-scope="scope">
<p v-html="colorIndex(scope.row.google_index,scope.row.google_time)"></p>
</template> -->
</el-table-column>
<el-table-column label="Contributions" align="center">
<template slot-scope="scope">
<div class="flexbox">
<div>Articles: <em v-if="scope.row.articles.length > 0">{{scope.row.articles.length}}</em><em v-else>0</em> /
<em v-if="scope.row.articles_all.length > 0">{{scope.row.articles_all.length}}</em><em v-else>0</em></div>
<div>Reviewes: <em v-if="scope.row.reviewes.length > 0">{{scope.row.reviewes.length}}</em><em v-else>0</em></div>
</div>
</template>
</el-table-column>
<el-table-column prop="ghindex" label="H-Google" width="110px" align="center">
<template slot-scope="scope">
<p v-html="colorIndex(scope.row.google_index,scope.row.google_time)"></p>
</template>
</el-table-column>
<el-table-column prop="wosindex" label="wosindex" width="110px" align="center">
<template slot-scope="scope">
<p v-html="colorIndex(scope.row.wos_index,scope.row.wos_time)"></p>
</template>
</el-table-column>
<el-table-column prop="remark" label="Remark" align="center">
<template slot-scope="scope">
<div style="margin-bottom: 5px;" v-if="scope.row.remark != ''">{{scope.row.remark}}</div>
<div>
<el-button v-if="scope.row.remark != ''" size="mini" type="primary" plain icon="el-icon-edit"
@click="BoxRemark(scope.row)"> Edit Remark</el-button>
<el-button v-else size="mini" type="primary" plain icon="el-icon-edit"
@click="BoxRemark(scope.row)"> Add Remark</el-button>
</div>
</template>
</el-table-column>
<el-table-column label="" width="150px" align="center">
<template slot-scope="scope">
<el-button size="mini" type="primary" plain icon="el-icon-edit"
@click="perSonnel(scope.row.user_id)">User Edit</el-button>
<!-- <el-button size="mini" type="primary" plain icon="el-icon-edit"
@click="bhandleEdit(scope.$index, scope.row)">Board Edit</el-button> -->
<!-- <el-button size="mini" type="danger" plain icon="el-icon-delete" style="margin-top: 10px;"
@click="handleDelete(scope.$index, scope.row)">Delete</el-button> -->
</template>
</el-table-column>
</el-table>
</div>
</div></div>
<div><div v-for="(item,key) of tableData_C" :key="key">
<div v-if="key !== 'nogroup'">
<p class="shen_number">{{key}}</p>
<el-table :data="item" border stripe class="table" ref="multipleTable" :show-header="false"
header-cell-class-name="table-header" empty-text="New messages (0)" style="margin-bottom: 20px;">
<el-table-column prop="realname" label="name">
<template slot-scope="scope">
<p @click="perSonnel(scope.row.user_id)" class="perSonGo">{{scope.row.realname}}</p>
</template>
</el-table-column>
<el-table-column prop="technical" label="technical" width="150px" align="center">
<!-- <template slot-scope="scope">
<p v-html="colorIndex(scope.row.wos_index,scope.row.wos_time)"></p>
</template> -->
</el-table-column>
<el-table-column prop="field" label="field" align="center">
<!-- <template slot-scope="scope">
<p v-html="colorIndex(scope.row.google_index,scope.row.google_time)"></p>
</template> -->
</el-table-column>
<el-table-column label="Contributions" align="center">
<template slot-scope="scope">
<div class="flexbox">
<div>Articles: <em v-if="scope.row.articles.length > 0">{{scope.row.articles.length}}</em><em v-else>0</em> /
<em v-if="scope.row.articles_all.length > 0">{{scope.row.articles_all.length}}</em><em v-else>0</em></div>
<div>Reviewes: <em v-if="scope.row.reviewes.length > 0">{{scope.row.reviewes.length}}</em><em v-else>0</em></div>
</div>
</template>
</el-table-column>
<el-table-column prop="ghindex" label="H-Google" width="110px" align="center">
<template slot-scope="scope">
<p v-html="colorIndex(scope.row.google_index,scope.row.google_time)"></p>
</template>
</el-table-column>
<el-table-column prop="wosindex" label="wosindex" width="110px" align="center">
<template slot-scope="scope">
<p v-html="colorIndex(scope.row.wos_index,scope.row.wos_time)"></p>
</template>
</el-table-column>
<el-table-column prop="remark" label="Remark" align="center">
<template slot-scope="scope">
<div style="margin-bottom: 5px;" v-if="scope.row.remark != ''">{{scope.row.remark}}</div>
<div>
<el-button v-if="scope.row.remark != ''" size="mini" type="primary" plain icon="el-icon-edit"
@click="BoxRemark(scope.row)"> Edit Remark</el-button>
<el-button v-else size="mini" type="primary" plain icon="el-icon-edit"
@click="BoxRemark(scope.row)"> Add Remark</el-button>
</div>
</template>
</el-table-column>
<el-table-column label="" width="150px" align="center">
<template slot-scope="scope">
<el-button size="mini" type="primary" plain icon="el-icon-edit"
@click="perSonnel(scope.row.user_id)">User Edit</el-button>
<!-- <el-button size="mini" type="primary" plain icon="el-icon-edit"
@click="bhandleEdit(scope.$index, scope.row)">Board Edit</el-button> -->
<!-- <el-button size="mini" type="danger" plain icon="el-icon-delete" style="margin-top: 10px;"
@click="handleDelete(scope.$index, scope.row)">Delete</el-button> -->
</template>
</el-table-column>
</el-table>
</div>
</div></div>
</div>
</div>
<!-- 添加弹出框 -->
<el-dialog title="Add Editorial board" :visible.sync="addVisible" width="750px" :close-on-click-modal="false"
@close='addVisCancle'>
<el-form ref="add_Form" :model="addForm" :rules="rules" label-width="150px" v-if="!dis_able">
<el-form-item label="Email :" prop="email" v-if="!dis_able">
<el-input v-model="addForm.email" style="width: 300px;"></el-input>
<el-button type="warning" @click="saerNa_U()" style="margin-left: 15px;" icon="el-icon-paperclip">
Check</el-button>
<p style="color: #888;margin-top: 10px;">
Note: The new editorial board must be a registered user. Click
<a class="zhu_ce" @click="Goto_res()">register</a>.
</p>
</el-form-item>
</el-form>
<el-form ref="add_Form" :model="addForm" :rules="rules" label-width="150px" v-if="dis_able">
<el-form-item label="Email :" prop="email">
{{addForm.email}}
</el-form-item>
<el-form-item label="Account :" prop="account">
{{addForm.account}}
</el-form-item>
<el-form-item label="Realname :" prop="name">
<el-input v-model="addForm.name" style="width: 300px;"></el-input>
</el-form-item>
<el-form-item label="Picture :" prop="board_icon">
<span slot="label">
<!-- <i style="color: #F56C6C;">*</i> -->
Picture
</span>
<el-upload class="avatar-uploader" :action="baseUrl+'api/Board/up_boardIcon_file'"
:show-file-list="false" name="boardIcon" :on-success="handleAvatarSuccess"
:on-error="handleAvatarError" :before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="Journal :" prop="journal_id">
<el-select v-model="addForm.journal_id" placeholder="Please select a journal" @change="getJourAdd()"
style="width: 300px;">
<el-option v-for="item in add_jour" :label="item.title" :key="item.journal_id"
:value="item.journal_id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Identity :" prop="type">
<el-radio-group v-model="addForm.type">
<el-radio :label="0">Editor-in-Chief</el-radio>
<el-radio :label="1">Vice Editor-in-Chief</el-radio>
<el-radio :label="2">Editorial Board Members</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="Group :" prop="board_group_id" v-if="addForm.type==2">
<el-select v-model="addForm.board_group_id" placeholder="Please select a group"
style="width: 300px;">
<el-option v-for="item in add_group" :label="item.group_name" :key="item.board_group_id"
:value="item.board_group_id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Homepage :" prop="website">
<el-input v-model="addForm.website"></el-input>
</el-form-item>
<el-form-item label="Academic degree :" prop="dr">
<el-input v-model="addForm.dr"></el-input>
</el-form-item>
<el-form-item label="Technical :" prop="title">
<el-select v-model="addForm.title" placeholder="Please select a technical" style="width: 300px;">
<el-option v-for="item in title_options" :key="item.value" :label="item.value"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Affiliation :" prop="address">
<el-input v-model="addForm.address"></el-input>
</el-form-item>
<el-form-item label="Country :" prop="country">
<el-select v-model="addForm.country" filterable placeholder="Please select a country"
value-key="groupID" style="width: 300px;">
<el-option v-for="item in add_country" :label="item.en_name" :key="item.en_name"
:value="item.en_name"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Field :" prop="field">
<el-input v-model="addForm.field" type="textarea" rows="5"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addVisible = false">Cancel</el-button>
<!-- 这这这 -->
<el-button type="primary" @click="saveAdd()" v-if="dis_able">OK</el-button>
</span>
</el-dialog>
<!-- 编辑弹出框 -->
<el-dialog title="Edit Editorial board" :visible.sync="editVisible" width="750px">
<el-form ref="edit_Form" :model="editForm" :rules="rules" label-width="150px">
<el-form-item label="Email :">
{{editForm.email}}
</el-form-item>
<el-form-item label="Realname :" prop="name">
<el-input v-model="editForm.name" style="width: 300px;"></el-input>
</el-form-item>
<el-form-item label="Picture :">
<span slot="label">
<i style="color: #F56C6C;">*</i>
Picture
</span>
<el-upload class="avatar-uploader" :action="baseUrl+'api/Board/up_boardIcon_file'"
:show-file-list="false" name="boardIcon" :on-success="handleAvatarSuccess_"
:on-error="handleAvatarError_" :before-upload="beforeAvatarUpload_">
<img v-if="imageUrl_" :src="imageUrl_" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="Journal :">
{{query.journal_title}}
<!-- <el-select v-model="editForm.journal_id" placeholder="Please select a journal"
@change="getJourEdit(editForm.journal_id)" style="width: 300px;">
<el-option v-for="item in add_jour" :label="item.title" :key="item.journal_id"
:value="item.journal_id"></el-option>
</el-select> -->
</el-form-item>
<el-form-item label="Identity :" prop="type">
<el-radio-group v-model="editForm.type">
<el-radio :label="0">Editor-in-Chief</el-radio>
<el-radio :label="1">Vice Editor-in-Chief</el-radio>
<el-radio :label="2">Editorial Board Members</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="Group :" prop="board_group_id" v-if="editForm.type==2">
<el-select v-model="editForm.board_group_id" placeholder="Please select a group"
style="width: 300px;">
<el-option v-for="item in edit_group" :label="item.group_name" :key="item.board_group_id"
:value="item.board_group_id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Homepage :" prop="website">
<el-input v-model="editForm.website"></el-input>
</el-form-item>
<el-form-item label="Academic degree :" prop="dr">
<el-input v-model="editForm.dr"></el-input>
</el-form-item>
<el-form-item label="Technical :" prop="title">
<el-select v-model="editForm.title" placeholder="Please select a technical" style="width: 300px;">
<el-option v-for="item in title_options" :key="item.value" :label="item.value"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Affiliation :" prop="address">
<el-input v-model="editForm.address"></el-input>
</el-form-item>
<el-form-item label="Country :" prop="country">
<el-select v-model="editForm.country" filterable placeholder="Please select a country"
value-key="groupID" style="width: 300px;">
<el-option v-for="item in add_country" :label="item.en_name" :key="item.en_name"
:value="item.en_name"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Field :" prop="field">
<el-input v-model="editForm.field" type="textarea" autosize></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editVisible = false">Cancel</el-button>
<el-button type="primary" @click="saveEdit()">OK</el-button>
</span>
</el-dialog>
<!-- 标记弹出框 -->
<el-dialog title="Remarks" :visible.sync="remarkBox" width="550px">
<el-form ref="remark" :model="remarkMes" label-width="130px">
<el-form-item label="Editorial board :">
<p style="line-height: 20px;margin-top: 6px;">{{remarkMes.realname}}</p>
</el-form-item>
<el-form-item label="Remark :">
<el-input type="textarea" rows="5" v-model="remarkMes.remark"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="remarkBox = false">Cancel</el-button>
<el-button type="primary" @click="saveRemark">Save</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
baseUrl: this.Common.baseUrl,
edit_id: localStorage.getItem('U_id'),
now_year: 0,
tableData_0: [],
tableData_A: [],
tableData_B: [],
tableData_C: [],
df_jour: [],
df_group: [],
add_jour: [],
add_group: [],
add_country: [],
addVisible: false,
editVisible: false,
addForm: {
email: '',
board_icon:'',
board_group_id: -1
},
editForm: {
journal_id: 0
},
edit_group: [],
dis_able: false,
remarkMes: {
remark: ''
},
remarkBox: false,
query: {
journal_id: 0,
journal_title: '',
},
imageUrl: '',
imageUrl_: '',
imageUrl_Mark: 0,
title_options: [{
value: 'Instructor'
},
{
value: 'Assistant Professor'
},
{
value: 'Senior Assistant Professor'
},
{
value: 'Associate Professor'
},
{
value: 'Senior Associate professor'
},
{
value: 'Professor'
},
{
value: 'Researcher'
},
{
value: 'Associate Researcher'
},
{
value: 'Assistant Researcher'
},
{
value: 'RN'
},
{
value: 'Research Fellow'
},
{
value: 'Associate Research Scientist'
},
{
value: 'Research Scientist'
},
{
value: 'Senior Research Fellow'
},
{
value: 'Senior Lecturer'
},
{
value: 'Physician'
},
{
value: 'Attending Physician'
},
{
value: 'Associate Chief Physician'
},
{
value: 'Chief Physician'
},
{
value: 'Senior Research Scientist'
},
{
value: 'Honorary Senior Research Fellow'
},
{
value: 'Director'
},
{
value: 'Executive Director'
},
{
value: 'Sr. Bioinformatics Scientist'
},
{
value: 'Psychotherapist'
},
{
value: 'Postdoctoral Researcher'
},
{
value: 'Managing Editor'
},
{
value: 'Scientific Editor'
},
{
value: 'Production Editor'
},
{
value: 'Assistant Editor'
},
{
value: 'Engineer'
},
{
value: 'Lecturer'
},
{
value: 'Investigator'
},
{
value: 'Senior Investigator'
},
{
value: '教授'
},
{
value: '副教授'
},
{
value: '讲师'
},
{
value: '主任医师'
},
{
value: '副主任医师'
},
{
value: '主治医师'
},
{
value: '主任中医师'
},
{
value: '副主任中医师'
}
],
rules: {
account: [{
required: true,
message: 'Please input account',
trigger: 'blur'
}],
email: [{
required: true,
message: 'Please input email',
trigger: 'blur'
}, {
validator: function(rule, value, callback) {
if (/^[-.-_A-Za-z0-9]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value) == false) {
callback(new Error("Please enter the correct email format"));
} else {
callback();
}
},
trigger: "blur"
}],
name: [{
required: true,
message: 'Please input realname',
trigger: 'blur'
}],
journal_id: [{
required: true,
message: 'Please select a journal',
trigger: 'blur'
}],
board_group_id: [{
required: true,
message: 'Please select a group',
trigger: 'blur'
}],
website: [{
required: true,
message: 'Please input website',
trigger: 'blur'
}],
type: [{
required: true,
message: 'Please input type',
trigger: 'blur'
}],
dr: [{
required: true,
message: 'Please input academic degree',
trigger: 'blur'
}],
title: [{
required: true,
message: 'Please input technical',
trigger: 'blur'
}],
field: [{
required: true,
message: 'Please input field ',
trigger: 'blur'
}],
board_icon: [{
required: true,
message: 'Please select a icon',
trigger: 'blur'
}],
address: [{
required: true,
message: 'Please input affiliation',
trigger: 'blur'
}],
country: [{
required: true,
message: 'Please select a country',
trigger: 'blur'
}],
}
};
},
created() {
this.getDate();
},
methods: {
// 获取编委和负责期刊列表数据
getDate() {
const loading = this.$loading({
lock: true,
text: 'Loading...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
this.$api
.post('api/Monitor/getboards', {'journal_id': this.$route.query.id})
.then(res => {
if (res.code == 0) {
if (res.data.boards.main != undefined) {
this.tableData_A = res.data.boards.main;
// for (var i = 0; i < this.tableData_A.length; i++) {
// this.getScoreDataA(i, this.tableData_A[i].score)
// }
} else {
this.tableData_A = []
}
if (res.data.boards.remain != undefined) {
this.tableData_B = res.data.boards.remain;
// for (var i = 0; i < this.tableData_B.length; i++) {
// this.getScoreDataB(i, this.tableData_B[i].score)
// }
} else {
this.tableData_B = []
}
if (res.data.boards.member != undefined) {
this.tableData_C = res.data.boards.member;
// for (var i = 0; i < this.tableData_C.length; i++) {
// this.getScoreDataC(i, this.tableData_C[i].score)
// }
} else {
this.tableData_C = []
}
//this.tableData_A = res.data.boards.member
loading.close();
} else {
this.$message.error(res.msg);
loading.close();
}
})
.catch(err => {
this.$message.error(err);
loading.close();
});
},
// 分组管理
addGroup() {
this.$router.push('/editorGroup');
},
// 用户跳转
perSonnel(e) {
let routerJump = this.$router.resolve({
path: '/partyRole',
query: {
id: e
}
});
window.open(routerJump.href, '_blank');
},
// 添加操作
addEditor(index, row) {
this.addForm.journal_id = this.add_jour[0].journal_id
this.getJourAdd()
this.addVisible = true;
},
// 保存添加
saveAdd() {
this.$refs.add_Form.validate((valid) => {
if (valid) {
if (this.addForm.board_icon == '' || this.addForm.board_icon == undefined) {
this.$message.error('Please upload the picture!');
return
}
this.$api
.post('api/Board/addBoard', this.addForm)
.then(res => {
if (res.code == 0) {
this.addVisible = false;
this.$refs.add_Form.resetFields();
this.$message.success(`Added successfully`);
this.dis_able = false
this.getDate();
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
this.$message.error(err);
});
} else {
return false;
}
});
},
// 添加关闭
addVisCancle() {
this.$refs['add_Form'].resetFields();
this.addForm.email = ''
this.dis_able = false
},
// 编辑操作
handleEdit(index, row) {
this.editForm = Object.assign({}, row);
console.log(this.editForm,'this.editForm')
this.imageUrl_ = this.baseUrl + 'journalpublic/' + this.editForm.board_icon
this.imageUrl_Mark = 0
this.editVisible = true
// this.getJourEdit(this.query.journal_id)
},
// 编辑编委操作
bhandleEdit(index, row) {
console.log(row,'row')
},
// 改变期刊
getJourEdit(e) {
this.$api
.post('api/Board/getBoardGroupList', {
journal_id: e
})
.then(res => {
if (res.code == 0) {
this.edit_group = res.data.groups;
this.edit_group.unshift({
'board_group_id': 0,
'group_name': 'No Group'
})
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
this.$message.error(err);
});
},
// 保存编辑
saveEdit() {
this.$refs.edit_Form.validate((valid) => {
if (valid) {
this.$api
.post('api/Board/editBoard', this.editForm)
.then(res => {
if (res.code == 0) {
this.editVisible = false;
this.$refs.edit_Form.resetFields();
this.$message.success(`Edit successfully`);
this.getDate();
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
this.$message.error(err);
});
if (this.imageUrl_Mark == 1) {
this.$api
.post('api/Board/editIcon', this.editForm)
.then(res => {
if (res.code == 0) {
this.imageUrl_Mark = 0
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
this.$message.error(err);
});
}
} else {
return false;
}
});
},
// 删除操作
handleDelete(index, row) {
// 二次确认删除
this.$confirm('Are you sure you want to delete?', 'Tips', {
type: 'warning'
})
.then(() => {
this.$api
.post('api/Board/delBoard', row)
.then(res => {
if (res.code == 0) {
this.$message.success('Delete succeeded');
this.getDate();
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
this.$message.error(err);
});
})
.catch(() => {});
},
// 点击注册
Goto_res() {
this.$router.push('/register');
},
// 标记弹出框
BoxRemark(e) {
this.remarkBox = true;
this.remarkMes.realname = e.realname;
this.remarkMes.btj_id = e.btj_id;
this.remarkMes.remark = e.remark;
},
// 修改标记
saveRemark() {
this.$api.post('api/Board/editBoardRemark', {
'btj_id': this.remarkMes.btj_id,
'remark': this.remarkMes.remark
})
.then(res => {
if (res.code == 0) {
this.$message.success('Success');
this.remarkBox = false;
this.getDate();
} else {
this.$message.error(res.msg);
}
});
},
// 指数颜色
colorIndex(num, time) {
if (time != 0) {
let date = new Date(parseInt(time * 1000));
let Y = date.getFullYear() + '-';
let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
let H = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
let U = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
time = Y + M + D;
}
let str = '';
if (num < 10) {
str = '<b style="color:#cb160a">' + num +
'</b><span style="color:#aaa;font-size:14px;margin-left:5px;"><br/>(' + time +
')</span>'
} else if (num < 15) {
str = '<b style="color:#cbb504">' + num +
'</b><span style="color:#aaa;font-size:14px;margin-left:5px;"><br/>(' + time +
')</span>'
} else {
str = '<b style="color:#0cbc15">' + num +
'</b><span style="color:#aaa;font-size:14px;margin-left:5px;"><br/>(' + time +
')</span>'
}
if (time == 0) {
str =
'<b style="color:#aaa;">0</b><br/><span style="color:#aaa;font-size:14px;margin-left:5px;">(No time)</span>'
}
return str;
},
//上传图片-添加
handleAvatarSuccess(res, file) {
if (res.code == 0) {
this.addForm.board_icon = res.upurl;
} else {
this.$message.error(res.msg);
}
this.imageUrl = URL.createObjectURL(file.raw);
},
handleAvatarError(res, file) {
// this.$message.error(res);
},
beforeAvatarUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 1;
if (!isLt2M) {
this.$message.error('The picture size cannot exceed 1M!');
}
return isLt2M;
},
//上传图片-编辑
handleAvatarSuccess_(res, file) {
if (res.code == 0) {
this.editForm.board_icon = res.upurl;
// this.imageUrl_ = this.baseUrl + 'boardIcon/' + res.upurl;
this.imageUrl_Mark = 1
} else {
this.$message.error(res.msg);
}
this.imageUrl_ = URL.createObjectURL(file.raw);
},
handleAvatarError_(res, file) {
// this.$message.error(res);
},
beforeAvatarUpload_(file) {
const isLt2M = file.size / 1024 / 1024 < 1;
if (!isLt2M) {
this.$message.error('The picture size cannot exceed 1M!');
}
return isLt2M;
},
}
};
</script>
<style scoped>
.flexbox{display: flex; justify-content: space-between;}
.flexbox div{width: 50%;}
.flexbox em{font-style: normal; font-weight: bold; font-size: 14px; color: #409EFF; background: #ecf5ff; border-radius: 10px; padding: 4px;}
.handle-box {
margin-bottom: 20px;
}
.table {
width: 100%;
font-size: 14px;
}
.red {
color: #ff0000;
}
.zhu_ce {
text-decoration: underline;
color: #006699;
font-weight: bold;
cursor: pointer;
}
.biaoTou {
background-color: #006699;
font-size: 14px;
min-width: 800px;
}
.nullTable {
margin-bottom: 20px;
}
.shen_fen {
margin: 30px 0 20px 0;
font-weight: bold;
letter-spacing: -0.5px;
}
.shen_number {
margin-bottom: 15px;
margin-left: 5px;
}
.perSonGo:hover {
text-decoration: underline;
color: #006699;
cursor: pointer;
}
.starSty {
width: 18px;
margin-right: 4px;
vertical-align: text-top;
}
.starSty:nth-last-child(1) {
margin-right: 0;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 140px;
height: 140px;
}
.avatar-uploader_small {
height: 140px;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 140px;
height: 140px;
line-height: 140px;
text-align: center;
}
.avatar-uploader_small .el-upload {
width: 80px;
height: 80px;
}
.avatar-uploader_small .avatar-uploader-icon {
line-height: 80px;
margin-left: -30px;
}
.avatar {
width: 140px;
height: 140px;
display: block;
}
</style>