Files
tougao_web/src/components/page/youthList.vue
2023-09-12 16:28:16 +08:00

738 lines
21 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
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> Young Scientist list
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container" style="min-width: 1000px;">
<div class="handle-box">
<div>
<span style="font-size: 14px;color: #606266;margin: 0 10px 0 0;">Journal : </span>
<el-select v-model="query.journal_id" placeholder="Please select a journal" @change="query.pageIndex = 1;getDate()"
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>
<span style="font-size: 14px;color: #606266;margin: 0 10px 0 40px;">Keywords :</span>
<el-input v-model="query.keywords" placeholder="Account / Realname / Email"
style="width: 230px;margin: 0 10px 0 0;">
</el-input>
<el-input v-model="query.fieldkey" placeholder="Field1 ; Field2 ; Field3"
style="width: 220px;margin: 0 10px 0 0;">
</el-input>
<el-button type="primary" icon="el-icon-search" @click="query.pageIndex = 1;getDate()">Search
</el-button>
</div>
<div style="margin-top: 15px;">
<span style="font-size: 14px;color: #606266;margin: 0 10px 0 0;">Term of service : </span>
<el-radio-group v-model="query.type" @change="selectShai">
<el-radio :label="1">Be on duty</el-radio>
<el-radio :label="2">Exceed the time limit</el-radio>
<el-radio :label="3">
<el-select v-model="query.year" @change="selectYearShai" style="width: 80px;">
<el-option v-for="item in df_year" :label="item.title" :key="item.id" :value="item.id">
</el-option>
</el-select>
</el-radio>
</el-radio-group>
<el-button type="primary" icon="el-icon-plus" @click="addHandle" style="float: right;">
Add new Young Scientist</el-button>
</div>
</div>
<el-table :data="tableData" border stripe class="table" ref="multipleTable" @sort-change="changeSort"
header-cell-class-name="table-header">
<el-table-column label="Basic Information">
<template slot-scope="scope">
<p class="tab_tie_col">
<span>Realname: </span><b style="font-size: 15px;">{{scope.row.realname}}</b>
</p>
<p class="tab_tie_col">
<span>Account: </span>{{scope.row.account}}
</p>
<p class="tab_tie_col">
<span>Email: </span>{{scope.row.email}}
</p>
</template>
</el-table-column>
<el-table-column label="Additional Information">
<template slot-scope="scope">
<p class="tab_tie_col">
<span>Affiliation: </span>{{scope.row.company}}
</p>
<p class="tab_tie_col">
<span>Field: </span>{{scope.row.field}}
</p>
<!-- <p class="tab_tie_col">
<span>Major: </span>{{scope.row.major_title}}
</p> -->
</template>
</el-table-column>
<el-table-column label="Contributions" align="center" width="150">
<template slot-scope="scope">
<div class="Contributions">
<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 label="H-WOS" 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 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="grade" label="Grade" width="110px" align="center">
<template slot-scope="scope">
<p style="display: inline-block;" v-if="scope.row.starList_mark!=0">
<img src="../../assets/img/star-all.png" v-for="item in scope.row.starList"
v-if="scope.row.starList_mark<=8&&item.star==1" class="starSty">
<img src="../../assets/img/star-traf.png" v-for="item in scope.row.starList"
v-if="scope.row.starList_mark<=8&&item.star==0" class="starSty">
<img src="../../assets/img/star-none.png" v-for="item in scope.row.starList"
v-if="scope.row.starList_mark<=8&&item.star==2" class="starSty">
<img src="../../assets/img/star-all.png" v-if="scope.row.starList_mark>8" class="starSty">
<b style="font-size: 15px;color: #b77614;" v-if="scope.row.starList_mark>8">×
{{scope.row.starList_mark}}</b>
</p>
</template>
</el-table-column>
<el-table-column label="Term of service" align="center" width="160">
<template slot-scope="scope">
<p v-for="item in scope.row.sd">
{{formatYear(item.start_date)}}
<span style="margin: 0 3px;">-</span>
{{formatYear(item.end_date)}}
</p>
</template>
</el-table-column>
<el-table-column prop="remark" label="Remarks" width="180" sortable="custom">
<template slot-scope="scope">
{{scope.row.remark}}
<b @click="BoxRemark(scope.row)" style="margin-left:10px;cursor: pointer;color:#006699;"
class="el-icon-edit"></b>
</template>
</el-table-column>
<el-table-column align="center" width="120">
<template slot-scope="scope">
<div style="margin: 0 0 10px 0;">
<el-button type="primary" plain icon="el-icon-edit" @click="handleDtail(scope.row)">
Detail
</el-button>
</div>
<div>
<el-button type="success" plain icon="el-icon-connection" @click="reneHandle(scope.row)">
Renewal
</el-button>
</div>
<div style="margin: 10px 0;">
<el-button type="warning" plain icon="el-icon-trophy" @click="cerFicte(scope.row)">
Certificate
</el-button>
</div>
<div>
<el-button type="danger" plain icon="el-icon-delete" @click="reneDelete(scope.row)">Delete
</el-button>
</div>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
:page-size="query.pageSize" :total="Total" @current-change="handlePageChange"></el-pagination>
</div>
</div>
<!-- 添加弹出框 -->
<el-dialog title="Add Young Scientist" :visible.sync="addVisible" width="620px" :close-on-click-modal="false"
@close='addVisCancle'>
<el-form ref="add_Form" :model="addForm" :rules="rules" label-width="140px" v-if="!dis_able">
<el-form-item label="Email / Account :" prop="account" v-if="!dis_able">
<el-input v-model="addForm.account" 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 Young Scientist must be a registered user.
<br>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="Account :">
{{addForm.account}}
</el-form-item>
<el-form-item label="Email :">
{{addForm.email}}
</el-form-item>
<el-form-item label="Realname :">
{{addForm.realname}}
</el-form-item>
<el-form-item label="Journal :" prop="journal_id">
<el-select v-model="addForm.journal_id" placeholder="Please select a journal" style="width: 270px;">
<el-option v-for="item in df_jour" :label="item.title" :key="item.journal_id"
:value="item.journal_id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Term of office :" prop="year">
<el-select v-model="addForm.year" placeholder="Please select a year">
<el-option v-for="item in list_year" :label="item.title" :key="item.id" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addVisCancle">Cancel</el-button>
<el-button type="primary" @click="saveAdd()" v-if="dis_able">OK</el-button>
</span>
</el-dialog>
<!-- 续约弹出框 -->
<el-dialog title="Renewal Young Scientist" :visible.sync="reneVisible" width="600px">
<el-form ref="rene_Form" :model="reneForm" :rules="rules" label-width="140px">
<el-form-item label="Account :">
{{reneForm.account}}
</el-form-item>
<el-form-item label="Email :">
{{reneForm.email}}
</el-form-item>
<el-form-item label="Realname :">
{{reneForm.realname}}
</el-form-item>
<el-form-item label="Term of office :" prop="year">
<el-select v-model="reneForm.year" placeholder="Please select a year">
<el-option v-for="item in list_year" :label="item.title" :key="item.id" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="reneVisible = false">Cancel</el-button>
<el-button type="primary" @click="saveRene()">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="Young Scientist :">
<p style="line-height: 20px;margin-top: 6px;">{{remarkMes.realname}}</p>
</el-form-item>
<el-form-item label="Email :">
<p style="line-height: 20px;margin-top: 6px;">{{remarkMes.email}}</p>
</el-form-item>
<el-form-item label="Content :">
<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>
<!-- 证书弹出框 -->
<el-dialog :visible.sync="cerVisible" width="850px">
<el-image class="table-td-thumb rev_digol" :src="this.IMG_Url"></el-image>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'youthList',
data() {
return {
YearThis: 0,
edit_id: localStorage.getItem('U_id'),
query: {
journal_id: 0,
type: 1,
year: 0,
pageIndex: 1,
pageSize: 15,
keywords: '',
fieldkey: '',
order_remark: 0
},
Total: 0,
df_jour: [],
df_year: [],
list_year: [{
title: '1 Year',
id: 1
}, {
title: '2 Years',
id: 2
}, {
title: '3 Years',
id: 3
}],
tableData: [],
IMG_Url: '',
addVisible: false,
reneVisible: false,
cerVisible: false,
addForm: {
account: '',
},
reneForm: {
journal_id: 0
},
remarkMes: {
remark: ''
},
remarkBox: false,
dis_able: false,
rules: {
account: [{
required: true,
message: 'Please enter email / account',
trigger: 'blur'
}],
journal_id: [{
required: true,
message: 'Please select journal',
trigger: 'blur'
}],
year: [{
required: true,
message: 'Please select year',
trigger: 'blur'
}],
}
};
},
onShow() {
var pages = getCurrentPages(); // 获取当前页面栈
var currentPage = pages[pages.length - 1]; // 当前页面
if (currentPage.data.refreshIfNeeded) {
currentPage.data.refreshIfNeeded = false;
//这里为要调用的函数重新获取数据记得加上this
this.getDate();
}
},
created() {
this.getSelect();
this.yearData()
},
methods: {
// 获取当年时间
yearData() {
this.YearThis = new Date().getFullYear()
this.query.year = this.YearThis
for (let i = 0; i < 15; i++) {
this.df_year.push({
title: 2016 + i,
id: 2016 + i
})
}
},
// 获取下拉值
getSelect() {
this.$api
.post('api/Chief/getJournalsByEditor', {
'user_id': this.edit_id
})
.then(res => {
if (res.code == 0) {
this.df_jour = res.data.journals;
this.query.journal_id = this.df_jour[0].journal_id
this.getDate();
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
this.$message.error(err);
});
},
// 获取青年科学家列表数据
getDate() {
this.$api
.post('api/User/getYboardlist', this.query)
.then(res => {
if (res.code == 0) {
this.tableData = res.data.yboards;
for (var i = 0; i < this.tableData.length; i++) {
this.getScoreData(i, this.tableData[i].score)
}
this.Total = res.data.count;
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
console.log(err);
});
},
// 排序
changeSort(val) {
if (val.prop == 'remark') {
if (val.order == 'ascending') {
this.query.order_remark = 1
} else {
this.query.order_remark = 0
}
}
this.getDate()
},
// 评分
getScoreData(i, e) {
this.tableData[i].starList = []
this.tableData[i].starList_mark = 0
if (e < 0.5 && e > 0) {
this.tableData[i].starList.push({
star: 2
})
this.tableData[i].starList_mark = 1
} else {
let zheng = Math.floor(e)
let xiao = Number(e) - Math.floor(e)
if (xiao >= 0.5) {
xiao = 0.5
} else {
xiao = 0
}
for (var j = 0; j < zheng; j++) {
this.tableData[i].starList.push({
star: 1
})
}
if (xiao == 0.5) {
this.tableData[i].starList.push({
star: 0
})
}
this.tableData[i].starList_mark = Number(zheng) + Number(xiao)
}
},
// 日期条件筛选
selectShai() {
this.query.pageIndex = 1;
this.getDate();
},
selectYearShai() {
this.query.type = 3
this.query.pageIndex = 1;
this.getDate();
},
// 新增
addHandle() {
this.dis_able = false
this.addForm.account = ''
this.addVisible = true
},
// 保存添加
saveAdd() {
this.$refs.add_Form.validate((valid) => {
if (valid) {
const loading = this.$loading({
lock: true,
text: 'Loading...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
this.$api
.post('api/User/addYboard', this.addForm)
.then(res => {
if (res.code == 0) {
this.addVisible = false;
this.getDate();
this.$message.success(`Added successfully`);
this.$refs.add_Form.resetFields();
this.dis_able = false
loading.close();
} else {
this.$message.error(res.msg);
loading.close();
}
})
.catch(err => {
this.$message.error(err);
loading.close();
});
} else {
return false;
}
});
},
// 添加关闭
addVisCancle() {
this.addVisible = false
this.$refs.add_Form.resetFields();
},
// 查找与他相同的账号
saerNa_U() {
if (this.addForm.account != undefined && this.addForm.account != '') {
this.$api
.post('api/User/searchUserByAccountEmail', {
'account': this.addForm.account
})
.then(res => {
if (res.code == 0) {
if (res.data.user == null) {
this.dis_able = false
this.$message.error('Verify that the account or mailbox does not exist!');
} else {
this.dis_able = true
this.addForm.user_id = res.data.user.user_id
this.addForm.account = res.data.user.account
this.addForm.realname = res.data.user.realname
this.addForm.email = res.data.user.email
}
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
this.$message.error(err);
});
} else {
this.$message.error('Verification account or mailbox cannot be empty!');
}
},
// 点击注册
Goto_res() {
this.$router.push('/register');
},
// 详情
handleDtail(e) {
let routerJump = this.$router.resolve({
path: '/partyRole',
query: {
id: e.user_id
}
});
window.open(routerJump.href, '_blank');
},
// 续约
reneHandle(e) {
this.reneForm.journal_id = e.journal_id
this.reneForm.user_id = e.user_id
this.reneForm.account = e.account
this.reneForm.realname = e.realname
this.reneForm.email = e.email
this.reneVisible = true
},
// 保存续约
saveRene(e) {
this.$refs.rene_Form.validate((valid) => {
if (valid) {
const loading = this.$loading({
lock: true,
text: 'Loading...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
this.$api
.post('api/User/addYboardContinue', this.reneForm)
.then(res => {
if (res.code == 0) {
this.reneVisible = false;
this.getDate();
this.$message.success(`Renewal successfully`);
loading.close();
} else {
this.$message.error(res.msg);
loading.close();
}
})
.catch(err => {
this.$message.error(err);
loading.close();
});
} else {
return false;
}
});
},
// 删除
reneDelete(e) {
// 二次确认删除
this.$confirm('Are you sure you want to delete?', 'Tip', {
type: 'warning'
})
.then(() => {
this.$api
.post('api/User/delYboard', e)
.then(res => {
if (res.code == 0) {
this.$message.success('Deleted successfully');
this.getDate()();
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
this.$message.error(err);
});
})
.catch(() => {});
},
// 证书弹出层
cerFicte(e) {
this.IMG_Url = this.Common.mediaUrl + 'cert/' + e.icon
this.cerVisible = true;
},
// 标记弹出框
BoxRemark(e) {
this.remarkBox = true;
this.remarkMes.realname = e.realname;
this.remarkMes.user_id = e.user_id;
this.remarkMes.email = e.email;
this.remarkMes.remark = e.remark;
},
// 修改标记
saveRemark() {
this.$api.post('api/User/editRemarkForUser', this.remarkMes)
.then(res => {
if (res.code == 0) {
this.$message.success('Success');
this.remarkBox = false;
this.getDate();
} else {
this.$message.error(res.msg);
}
});
},
// 分页导航
handlePageChange(val) {
this.$set(this.query, 'pageIndex', val);
this.getDate();
},
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;">(Empty)</span>'
}
return str;
},
// 时间格式
formatDate(timestamp) {
var date = new Date(timestamp * 1000); //时间戳为10位需*1000时间戳为13位的话不需乘1000
var Y = date.getFullYear() + '-';
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
return Y + M + D;
},
formatYear(timestamp) {
var date = new Date(timestamp * 1000); //时间戳为10位需*1000时间戳为13位的话不需乘1000
var Y = date.getFullYear() + ' . ';
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
return Y + M;
},
}
};
</script>
<style scoped>
/* .Contributions{display: flex; justify-content: space-between;} */
.Contributions div{ margin-bottom: 20px;}
.Contributions 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;
}
.tab_tie_col {
margin-bottom: 5px;
color: #333;
word-wrap: break-word;
word-break: normal;
}
.tab_tie_col>span {
color: #888;
margin: 0 5px 0 0;
font-size: 13px;
}
.starSty {
width: 18px;
margin-right: 4px;
vertical-align: text-top;
}
.starSty:nth-last-child(1) {
margin-right: 0;
}
</style>