Files
tougao_web/src/components/page/partyListIna_.vue

727 lines
20 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> Active Users
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container" style="min-width: 1200px;">
<div class="handle-box">
<p class="titline" style="margin-top: 0;">
Essential information
<b class="el-icon-arrow-right" v-if="shoLosA==false" @click="shoLosA=true"></b>
<b class="el-icon-arrow-down" v-if="shoLosA==true" @click="shoLosA=false"></b>
</p>
<div v-if="shoLosA">
<div class="titSear titSelectRole">
<span>Role :</span>
<el-radio-group v-model="query.role">
<el-radio v-for="item in roleList" :label="item.value">{{item.title}}</el-radio>
</el-radio-group>
</div>
<div class="titSear">
<span>Name/Email :</span>
<el-input v-model="query.username" placeholder="Please enter">
</el-input>
</div>
<div class="titSear">
<span>Hindex :</span>
<el-input v-model="query.username" placeholder="Please enter">
</el-input>
</div>
<div class="titSear">
<span>Country :</span>
<el-select v-model="query.country">
<el-option label="All country" :key="0" :value="0"></el-option>
<el-option label="China" :key="1" :value="1"></el-option>
</el-select>
</div>
</div>
<p class="titline">
Grade estimation
<b class="el-icon-arrow-right" v-if="shoLosB==false" @click="shoLosB=true"></b>
<b class="el-icon-arrow-down" v-if="shoLosB==true" @click="shoLosB=false"></b>
</p>
<div v-if="shoLosB">
<div class="titSear titSelectAct">
<span>Activity :</span>
<el-radio-group v-model="query.role">
<el-radio v-for="item in actList" :label="item.value">{{item.title}}</el-radio>
</el-radio-group>
</div>
<div class="titSear titMoreInp">
<span>Direction :</span>
<el-input v-model="query.username" placeholder="Please enter">
</el-input>
<el-input v-model="query.username" placeholder="Please enter" style="margin: 0 15px;">
</el-input>
<el-input v-model="query.username" placeholder="Please enter">
</el-input>
</div>
</div>
<p class="titline">
Release quantity
<b class="el-icon-arrow-right" v-if="shoLosC==false" @click="shoLosC=true"></b>
<b class="el-icon-arrow-down" v-if="shoLosC==true" @click="shoLosC=false"></b>
</p>
<div v-if="shoLosC">
<div class="titSear titSearLong">
<span>Publications Number :</span>
<el-input-number :min="0" v-model="query.Hindex"></el-input-number>
</el-input>
</div>
<div class="titSear titSearLong">
<span>Publication Journals :</span>
<el-select v-model="query.journal">
<el-option label="All journals" :key="0" :value="0"></el-option>
<el-option label="TMR Non-Drug Therapy" :key="1" :value="1"></el-option>
</el-select>
</div>
<br>
<div class="titSear titSearLong">
<span>Reviewed Number :</span>
<el-input-number :min="0" v-model="query.Hindex"></el-input-number>
</el-input>
</div>
<div class="titSear titSearLong">
<span>Reviewed Journals :</span>
<el-select v-model="query.journal">
<el-option label="All journals" :key="0" :value="0"></el-option>
<el-option label="TMR Non-Drug Therapy" :key="1" :value="1"></el-option>
</el-select>
</div>
<br>
<div class="titSear titSearLong">
<span>Indexed Number :</span>
<el-input-number :min="0" v-model="query.Hindex"></el-input-number>
</div>
<div class="titSear titSearLong">
<span>Indexed Journals :</span>
<el-select v-model="query.journal">
<el-option label="All journals" :key="0" :value="0"></el-option>
<el-option label="TMR Non-Drug Therapy" :key="1" :value="1"></el-option>
</el-select>
</div>
</div>
<div class="btnSear">
<el-button type="primary" icon="el-icon-search" @click="getDate"
style="margin-left: 70px;padding: 10px 80px;">
Search
</el-button>
<el-button plain icon="el-icon-refresh" @click="getDate">
Reset
</el-button>
</div>
<div style="float: right;margin-top: -65px;">
<el-button type="warning" icon="el-icon-document" @click="handlePopu">Popularize
</el-button>
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">Add User
</el-button>
</div>
</div>
<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
empty-text="New messages (0)">
<el-table-column prop="account" label="Account" v-if="this.userrole == 0"></el-table-column>
<el-table-column prop="realname" label="Realname"></el-table-column>
<el-table-column prop="email" label="Email" v-if="this.userrole == 0"></el-table-column>
<el-table-column prop="" label="WOS Index" width="120px" 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="" label="Google Index" width="120px" 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="Role" width="305px">
<template slot-scope="scope">
<p v-for="item in scope.row.roles" class="ro_li_ku">
<font v-if="item=='author'">Author</font>
<font v-if="item=='editor'">Editor</font>
<font v-if="item=='chief'">Editor-in-Chief</font>
<font v-if="item=='reviewer'">Reviewer</font>
<font v-if="item=='board'">Editorial Board Member</font>
<font v-if="item=='yboard'">Young Scientist Member</font>
<font v-if="item=='special'">Guest Editor</font>
</p>
<br clear="both">
</template>
</el-table-column>
<el-table-column label=" " width="290" align="center">
<template slot-scope="scope">
<!-- <el-button plain type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">Edit Message</el-button> -->
<el-button plain type="primary" icon="el-icon-discount" @click="handleRole(scope.row)">User
Detail
</el-button>
<el-button plain type="danger" icon="el-icon-lock" @click="handleDark(scope.row)">Join the
blacklist</el-button>
</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="link_Total" @current-change="handlePageChange">
</el-pagination>
</div>
</div>
<!-- 拉黑详情弹出框 -->
<el-dialog title="Pull black user" :visible.sync="blackVisible" width="500px" :close-on-click-modal="false">
<el-form ref="edit_Form" :model="blackForm" label-width="110px">
<el-form-item label="Account :">
{{blackForm.account}}
</el-form-item>
<el-form-item label="Realname :">
{{blackForm.realname}}
</el-form-item>
<el-form-item label="Email :">
{{blackForm.email}}
</el-form-item>
<el-form-item label="Black reasons :">
<el-input v-model="blackForm.reason" type="textarea" :rows="6"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleBlack(blackForm)">OK</el-button>
</span>
</el-dialog>
<!-- 添加用户邮箱验证弹出框 -->
<el-dialog title="Check Account And Email" :visible.sync="emailVisible" width="450px" :close-on-click-modal="false">
<el-form ref="emailTab" :model="emailForm" :rules="rules" label-width="90px">
<el-form-item label="Account :" prop="account">
<el-input v-model="emailForm.account"></el-input>
</el-form-item>
<el-form-item label="Email :" prop="email">
<el-input v-model="emailForm.email"></el-input>
</el-form-item>
</el-form>
<p v-if="email_num==1" style="margin: 0 0 0 100px;color: orangered;">
<!-- 验证失败 -->
{{emailForm.mark_new}}
</p>
<p v-if="email_num==2" style="margin: 0 0 0 100px;color: #006699;">
<!-- 验证成功 -->
Verification successful
</p>
<span slot="footer" class="dialog-footer">
<el-button @click="emailVisible = false">Cancel</el-button>
<el-button type="primary" @click="saveEmail">Check</el-button>
</span>
</el-dialog>
<!-- 添加用户弹出框 -->
<el-dialog title="Add User" :visible.sync="addVisible" width="550px" :close-on-click-modal="false">
<el-form ref="addTab" :model="addForm" :rules="rules" label-width="150px">
<el-form-item label="Account :" prop="account">
{{addForm.account}}
</el-form-item>
<el-form-item label="Email :" prop="email">
{{addForm.email}}
</el-form-item>
<el-form-item label="Password :" prop="password">
<el-input v-model="addForm.password" type="password"></el-input>
</el-form-item>
<el-form-item label="Confirm password :" prop="repassword">
<el-input v-model="addForm.repassword" type="password"></el-input>
</el-form-item>
<el-form-item label="Realname :" prop="realname">
<el-input v-model="addForm.realname"></el-input>
</el-form-item>
<el-form-item label="Phone :" prop="phone">
<el-input v-model="addForm.phone"></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">Save</el-button>
</span>
</el-dialog>
<!-- 编辑用户弹出框 -->
<el-dialog title="Edit User" :visible.sync="editVisible" width="550px" :close-on-click-modal="false">
<el-form ref="editTab" :model="editForm" :rules="rules" label-width="100px">
<el-form-item label="Account :" prop="account">
{{editForm.account}}
</el-form-item>
<el-form-item label="Email :" prop="email">
{{editForm.email}}
</el-form-item>
<el-form-item label="Realname :" prop="realname">
<el-input v-model="editForm.realname"></el-input>
</el-form-item>
<el-form-item label="Phone :" prop="phone">
<el-input v-model="editForm.phone"></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">Save</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'partyList',
data() {
return {
mediaUrl: this.Common.mediaUrl,
userrole: localStorage.getItem('U_status'),
guest_id: localStorage.getItem('U_id'),
tableData: [],
blackForm: {},
emailForm: {
mark_new: ''
},
roleList: [{
value: 0,
title: 'All Role'
},
{
value: 1,
title: 'Editor'
},
{
value: 2,
title: 'Reviewer'
},
{
value: 3,
title: 'Editorial Board Member'
}
],
actList: [{
value: 0,
title: 'All Grade'
}, {
value: 1,
title: 'A'
}, {
value: 2,
title: 'B'
}, {
value: 3,
title: 'C'
}, {
value: 4,
title: 'D'
}],
addForm: {},
editForm: {},
query: {
role: 0,
activ: 0,
journal: 0,
country: 0,
pageIndex: 1,
pageSize: 15,
username: ''
},
link_Total: 0,
email_num: 0,
blackVisible: false,
emailVisible: false,
addVisible: false,
editVisible: false,
shoLosA: true,
shoLosB: false,
shoLosC: false,
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"
}],
realname: [{
required: true,
message: 'Please input realname',
trigger: 'blur'
}],
phone: [{
required: true,
message: 'Please input phone',
trigger: 'blur'
}, {
validator: function(rule, value, callback) {
if (/^1[3456789]\d{9}$/.test(value) == false) {
callback(new Error("Please enter the correct phone format!"));
} else {
callback();
}
},
trigger: "blur"
}],
password: [{
required: true,
validator: 'Please input password',
trigger: 'blur'
}],
repassword: [{
required: true,
validator: 'Please input password again',
trigger: 'blur'
}],
}
};
},
mounted() {
},
created() {
this.getDate()
},
methods: {
// 获取数据
getDate() {
this.$api
.post('api/User/getAllUser', this.query)
.then(res => {
if (res.code == 0) {
this.tableData = res.data.users;
this.link_Total = res.data.count || 0;
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
this.$message.error(err);
});
},
// 指数颜色
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><br/><span style="color:#aaa;font-size:14px;margin-left:5px;"> (' + time +
')</span>'
} else if (num < 15) {
str = '<b style="color:#cbb504">' + num +
'</b><br/><span style="color:#aaa;font-size:14px;margin-left:5px;"> (' + time +
')</span>'
} else {
str = '<b style="color:#0cbc15">' + num +
'</b><br/><span style="color:#aaa;font-size:14px;margin-left:5px;"> (' + 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;
},
// 检测邮箱弹出框
handleAdd() {
this.email_num = 0
this.emailVisible = true
},
// 添加用户弹出框
saveEmail() {
this.$refs.emailTab.validate((valid) => {
if (valid) {
let Email_mark = 0
let Accnt_mark = 0
this.$api
.post('api/User/checkUserByEmail', this.emailForm)
.then(res => {
if (res.code == 0) {
if (res.data.has == 0) {
Email_mark = 0
} else {
Email_mark = 1
}
} else {
this.$message.error(res.msg);
}
this.$api
.post('api/User/checkUserByAccount', this.emailForm)
.then(res => {
if (res.code == 0) {
if (res.data.has == 0) {
Accnt_mark = 0
} else {
Accnt_mark = 1
}
} else {
this.$message.error(res.msg);
}
if (Email_mark == 1 && Accnt_mark == 1) {
this.email_num = 1
this.emailForm.mark_new = 'Email and account already exist!'
} else if (Email_mark == 1 && Accnt_mark != 1) {
this.email_num = 1
this.emailForm.mark_new = 'Email already exist!'
} else if (Email_mark != 1 && Accnt_mark == 1) {
this.email_num = 1
this.emailForm.mark_new = 'Account already exist!'
} else {
this.addForm.email = this.emailForm.email
this.addForm.account = this.emailForm.account
this.email_num = 2
setTimeout(() => {
this.emailVisible = false
this.addVisible = true
}, 1000);
}
})
.catch(err => {
this.$message.error(err);
});
})
.catch(err => {
this.$message.error(err);
});
} else {
this.$message.error('error submit!!');
return false;
}
});
},
// 保存添加用户
saveAdd() {
this.$refs.addTab.validate((valid) => {
if (valid) {
if (this.addForm.password == this.addForm.repassword) {
this.$api
.post('api/User/addUser', this.addForm)
.then(res => {
if (res.code == 0) {
this.addVisible = false
this.$refs.addTab.resetFields()
this.getDate()
this.$message.success('User added successfully!');
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
this.$message.error(err);
});
} else {
this.$message.error('The two passwords are inconsistent!');
}
} else {
this.$message.error('error submit!!');
return false;
}
});
},
// 编辑用户弹出框
handleEdit(row) {
this.editForm = Object.assign({}, row);
this.editVisible = true;
},
// 保存编辑用户
saveEdit() {
},
// 推广页面跳转
handlePopu() {
this.$router.push({
path: 'partyExte'
});
},
// 编辑身份跳页面
handleRole(row) {
this.$router.push({
path: 'partyRole',
query: {
id: row.user_id
}
});
},
// 拉黑弹窗
handleDark(row) {
this.blackForm = Object.assign({}, row);
this.blackVisible = true;
},
// 移除拉黑操作
handleBlack(blackForm) {
// 二次确认更改状态
this.$confirm('Are you sure you want ' + blackForm.realname + ' to join the blacklist', 'Tip', {
type: 'warning'
})
.then(() => {
this.$api
.post('api/User/pushUserToBlack', this.blackForm)
.then(res => {
if (res.code == 0) {
this.$message.success('Join the blacklist successful!');
this.blackForm.reason = '';
this.blackVisible = false;
this.getDate();
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
this.$message.error(err);
});
})
.catch(() => {});
},
// 分页导航
handlePageChange(val) {
this.$set(this.query, 'pageIndex', val);
this.getDate();
}
},
computed: {
},
watch: {
}
};
</script>
<style scoped>
.handle-box {
margin-bottom: 20px;
}
.el-button--primary.is-plain:hover {
background-color: #409EFF !important;
color: #fff !important;
}
.ro_li_ku {
border: 1px solid #419fcf;
border-radius: 5px;
color: #419fcf;
display: inline-block;
margin: 5px;
padding: 0 5px;
white-space: nowrap;
}
.titline {
font-size: 14px;
border-bottom: 1px solid #c7dbf1;
padding: 0 0 15px 0;
margin: 10px 0 15px 0;
}
.titline b {
float: right;
font-weight: bold;
font-size: 16px;
color: #006699;
margin: 5px 10px 0 0;
cursor: pointer;
width: 1000px;
text-align: right;
}
.titSear {
width: 325px;
margin-bottom: 18px;
display: inline-block;
}
.titSear>span {
color: #666;
display: inline-block;
vertical-align: middle;
line-height: 20px;
width: 100px;
text-align: right;
font-size: 14px;
margin: 0 15px 0 0;
}
.titSear .el-select,
.titSear .el-input {
width: 180px;
}
.titSelectRole {
display: block;
width: 800px;
}
.titSelectAct{
width: 800px;
}
.titMoreInp {
width: 800px;
}
.titSearLong {
width: 390px;
}
.titSearLong>span {
width: 165px;
}
.titSearLong .el-select,
.titSearLong .el-input {
width: 200px;
}
.btnSear {
text-align: center;
margin: 5px 0 30px 0;
/* border-top: 1px solid #c7dbf1; */
padding: 10px 0 0 0;
}
.btnreset {
float: right;
color: #006699;
font-size: 13px;
margin: 12px 15px 0 0;
text-decoration: underline;
}
.btnreset:hover {
cursor: pointer;
}
.btnreset i {
margin-right: 3px;
}
</style>