This commit is contained in:
2025-10-23 13:07:07 +08:00
parent ccaff5b459
commit e86b537bd1
5 changed files with 593 additions and 214 deletions

View File

@@ -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: '/', //正式
});

View File

@@ -5,12 +5,9 @@
const mediaUrl = '/public/';
const baseUrl = '/';
// const mediaUrl = 'https://submission.tmrjournals.com/public/';
// // const mediaUrl = 'http://zmzm.tougao.dev.com/public/';
// const baseUrl = '/api';
// const baseUrl = '/api'
//本地(正式环境 )
@@ -33,8 +30,6 @@ const baseUrl = '/';
export default {
baseUrl,
mediaUrl,
mediaUrl
};
</script>

View File

@@ -1,7 +1,7 @@
<template>
<div style="">
<div style="display: flex; justify-content: space-between">
<div style="width: 960px; position: relative">
<div style="width: 100%;min-width: 1020px; position: relative">
<div class="step_list_new">
<el-steps :active="0" align-center>
<el-step
@@ -32,35 +32,24 @@
<br clear="both" />
</div> -->
<div class="manu_add" style="width: 960px" v-loading="loading">
<div class="manu_add" style="width: calc(100% - 20px);" v-loading="loading">
<el-form ref="articleform" :model="form" :rules="rules" label-width="120px">
<div class="bag_color" v-if="show_step == 1">
<div>
<h3>Manuscript Information</h3>
<el-form-item label="Journal :" prop="journal" v-if="ms_alias != null">
<div style="font-size: 16px">{{ check_item.title }}</div>
<p style="color: #666; line-height: 24px; font-size: 13px; margin: 5px 0 0 0">
<b>E-Mail Address : </b>{{ check_item.email }}
<br />
<b>Website : </b
><a :href="check_item.website" target="_blank" style="color: #666" class="web_stite">{{
check_item.website
}}</a>
</p>
<!-- <el-button type="warning" size="mini" icon="el-icon-refresh" plain @click="change_Journal" style="margin-top: 15px;">Change Journal</el-button> -->
</el-form-item>
<el-form-item label="Journal :" prop="journal" v-if="ms_alias == null">
<div
v-for="item in items"
@click="ch_Jour_all(item.journal_id)"
:class="form.journal == item.journal_id ? 'jour_ku_all B_style' : 'jour_ku_all'"
>
{{ item.title }}
</div>
<el-form-item label="Journal :" prop="journal">
<JournalSelector
ref="journalSelector"
@selected="handleJournalSelected"
:list="items"
:check_item="check_item"
/>
</el-form-item>
<el-form-item label="Type :" prop="type" >
<el-select v-model="form.type" placeholder="Please select type" style="width: 240px">
<el-select v-model="form.type" style="width: 240px" placeholder="">
<el-option
v-for="item in journal_type"
:key="item.value"
@@ -71,10 +60,10 @@
</el-form-item>
<el-form-item label="Manuscript Title :" prop="title" label-width="160px">
<el-input v-model="form.title" placeholder="Please enter title"></el-input>
<el-input v-model="form.title" ></el-input>
</el-form-item>
<el-form-item label="Whether ethical approval was obtained ?" prop="approval" label-width="300px">
<el-form-item label="Whether ethical approval was obtained ?" prop="approval" label-width="290px">
<el-radio-group v-model="form.approval">
<el-radio :label="1">Yes</el-radio>
<el-radio :label="0">No</el-radio>
@@ -84,8 +73,9 @@
label="Ethical approval file :"
prop="approval_file"
v-if="form.approval == 1"
label-width="300px"
label-width="290px"
>
<el-upload
ref="uploadFile"
class="upload-demo up_newstyle"
@@ -104,10 +94,13 @@
<div class="el-upload__text" @click="clearUploadedFile">
<em>Upload</em>
</div>
<div class="el-upload__tip" slot="tip">
Only Word and compressed files can be uploaded (file format: .pdf).
<div class="el-upload__tip" slot="tip" style="line-height: 20px;left: 80px;font-size: 13px;top: -9px;">
Only PDF and compressed files can be uploaded.<br/>
<span style="color: #8c8d8f;">Please ensure that the file includes the ethics approval number and the institutional approval document.</span>
</div>
</el-upload>
</el-form-item>
<el-form-item
label="Explain the reason clearly :"
@@ -119,7 +112,7 @@
type="textarea"
rows="2"
v-model="form.approval_content"
placeholder="Please enter"
></el-input>
</el-form-item>
<el-form-item label="Abstract :" prop="abstrart">
@@ -127,7 +120,7 @@
type="textarea"
rows="5"
v-model="form.abstrart"
placeholder="Please enter the abstract"
></el-input>
</el-form-item>
<!-- 话题 -->
@@ -144,7 +137,7 @@
:key="index"
:name="index + 1"
v-model="item.ke"
:placeholder="'Key words' + (index + 1)"
style="width: 150px; margin-right: 15px; margin-bottom: 3px"
></el-input>
<el-button type="text" @click="addfund">
@@ -154,50 +147,12 @@
<el-form-item label="Fund :">
<el-input
v-model="form.fund"
placeholder="Please provide the specific funding information if your research has received funding support"
>
</el-input>
</el-form-item>
<el-form-item label="Article Processing Charge :" v-if="form.journal != 0" label-width="180px">
$ {{ getFee(form.journal) }}
<div style="color: #8c8d8f" v-if="getFee(form.journal) && getFee(form.journal) != '0.00'">
<i class="el-icon-warning" style="color: #517fd5; margin-right: 4px"></i>The article processing fee
applies to papers submitted and ultimately accepted for publication after January 1, 2025. For
authors seeking to apply for fee discounts, please
<a
style="color: rgb(81, 127, 213); cursor: pointer; text-decoration: underline"
href="https://www.tmrjournals.com/apc/"
target="_blank"
>click here</a
>
to view detailed policies.
</div>
</el-form-item>
<el-form-item
label="Has artificial intelligence been used in the article ?"
prop="approval"
label-width="340px"
>
<el-radio-group v-model="form.is_use_ai" @input="changeUseAi">
<el-radio :label="1">Yes</el-radio>
<el-radio :label="2">No</el-radio>
</el-radio-group>
<div v-if="form.is_use_ai == 1">
<!-- <p class="zyfont" style="font-weight: normal; margin: 20px 0 10px 0; color: #777">
If yes, please provide a brief explanation in the text box below.<i
class="el-icon-edit"
style="margin-left: 10px"
></i>
</p> -->
<el-input
type="textarea"
placeholder="please input content"
v-model="form.use_ai_explain"
:rows="4"
></el-input>
</div>
</el-form-item>
<div style="text-align: center; margin: 40px 0 0 0">
<el-button type="warning" @click="onStagingSave(1)" class="pro_stage">Save as draft </el-button>
<el-button type="primary" @click="onStep(1)" class="pro_ceed"
@@ -566,12 +521,11 @@
type="textarea"
rows="3"
v-model="reviewerForm.introduction"
placeholder="Please input personal qualification and resume"
></el-input>
</el-form-item>
<!-- 国家 -->
<el-form-item prop="country" label="Country :">
<el-select v-model="reviewerForm.country" filterable placeholder="Please select">
<el-select v-model="reviewerForm.country" filterable placeholder="">
<el-option
v-for="it in countrys"
:key="it.en_name"
@@ -582,7 +536,7 @@
</el-form-item>
<!-- 专业 -->
<el-form-item prop="major" label="Major :">
<el-select v-model="reviewerForm.major" filterable placeholder="Please select">
<el-select v-model="reviewerForm.major" filterable placeholder="">
<el-option
v-for="item in majorList"
:key="item.major_id"
@@ -597,12 +551,12 @@
size="small"
v-model="reviewerForm.field"
auto-complete="off"
placeholder="Field"
></el-input>
</el-form-item>
<!-- 职称 -->
<el-form-item prop="technical" label="Technical :">
<el-select v-model="reviewerForm.technical" placeholder="Please select">
<el-select v-model="reviewerForm.technical" placeholder="">
<el-option key="Prof." label="Prof." value="Prof."></el-option>
<el-option key="Associate Prof." label="Associate Prof." value="Associate Prof."> </el-option>
<el-option key="Assistant Prof." label="Assistant Prof." value="Assistant Prof."> </el-option>
@@ -616,7 +570,7 @@
size="small"
v-model="reviewerForm.company"
auto-complete="off"
placeholder="Affiliation"
></el-input>
</el-form-item>
<!-- 简历 -->
@@ -650,6 +604,7 @@
plain
icon="el-icon-plus"
style="width: 210px"
>Add Recommended Reviewer</el-button
>
</p>
@@ -683,11 +638,14 @@
<el-form-item label="Email :" prop="email">
<el-input v-model="item.email" style="width: 160px" :validate-event="false"></el-input>
</el-form-item>
<el-form-item label="Country :" prop="country">
<el-form-item label="Department :" >
<el-input v-model="item.department"></el-input>
</el-form-item>
<!-- <el-form-item label="Country :" prop="country">
<el-select
v-model="item.country"
filterable
placeholder="Please select"
clearable
style="width: 180px"
>
@@ -698,13 +656,15 @@
:value="it.en_name"
></el-option>
</el-select>
</el-form-item> -->
<el-form-item label="Affiliation :" prop="Affiliation">
<el-input v-model="item.Affiliation" style="width: 160px" :validate-event="false"></el-input>
</el-form-item>
<el-form-item label="Major :" prop="major_all">
<el-form-item label="Filed :" prop="major_all">
<el-cascader
:options="step4MajorList"
v-model="item.major_all"
:props="default4Params"
placeholder="Please select major"
style="width: 270px"
clearable
></el-cascader>
@@ -718,7 +678,7 @@
></el-button>
</el-form>
<p style="font-size: 12px; color: #888; margin: 15px 10px 0 55px; line-height: 18px">
<p style="font-size: 12px; color: #888; margin: 15px 10px 0px 55px; line-height: 18px">
You can suggest 3 potential reviewers, which can help speed up the review process.
<br /><b style="letter-spacing: -0.5px">Please pay attention:</b> <br />Authors may suggest potential
reviewers if they wish. However, whether or not to consider these reviewers is at the editor's
@@ -732,8 +692,36 @@
investigation in line with our misconduct policy.
</p>
<div style="margin: 50px 0 0 30px">
<el-form-item>
<!-- <h3 style="margin-bottom:16px;margin-top:30px;">Figure Copyright Declaration</h3>
<p style="line-height: 25px; margin: 0 10px 0 55px; font-size: 14px">
· I confirm that all figures in this manuscript are original<br/>
· I confirm that all figures in this manuscript used with proper permission. (upload the copyright permission letters or license documents figures.)
</p> -->
<!-- <div v-if="form.journal != 0">
<h3 style="margin-bottom:16px;margin-top:30px;">Article Processing Charge</h3>
<div style="line-height: 25px; margin: 0 10px 0 55px; font-size: 14px">
<div style="font-size: 16px;margin-bottom: 10px;font-weight: 700;">
$ {{ getFee(form.journal) }}
</div>
<div style="color: #8c8d8f;line-height: 20px;" v-if="getFee(form.journal) && getFee(form.journal) != '0.00'">
<i class="el-icon-warning" style="color: #517fd5; margin-right: 4px"></i>The article processing fee
applies to papers submitted and ultimately accepted for publication after January 1, 2025. For
authors seeking to apply for fee discounts, please
<a
style="color: rgb(81, 127, 213); cursor: pointer; text-decoration: underline"
href="https://www.tmrjournals.com/apc/"
target="_blank"
>click here</a
>
to view detailed policies.
</div>
</div>
</div> -->
<div style="margin:30px 0 30px 0px">
<el-form-item label-width="180px">
<span slot="label">
Invitation code
<el-popover placement="top-start" width="320" trigger="hover">
@@ -753,13 +741,89 @@
</span>
<el-input
v-model="form.code"
placeholder="Please enter invitation code"
style="width: 200px"
></el-input>
</el-form-item>
</div>
<el-form-item label="Article Processing Charge :" v-if="form.journal&&form.journal != 0" label-width="220px">
$ {{ getFee(form.journal) }}
<div style="color: #8c8d8f" v-if="getFee(form.journal) && getFee(form.journal) != '0.00'">
<i class="el-icon-warning" style="color: #517fd5; margin-right: 4px"></i>The article processing fee
applies to papers submitted and ultimately accepted for publication after January 1, 2025. For
authors seeking to apply for fee discounts, please
<a
style="color: rgb(81, 127, 213); cursor: pointer; text-decoration: underline"
href="https://www.tmrjournals.com/apc/"
target="_blank"
>click here</a
>
to view detailed policies.
</div>
</el-form-item>
<el-form-item label="Figure Copyright Declaration :" label-width="220px" prop="qualification">
<div style="margin: 20px 0 30px 30px">
<div style="color: #333" >
<el-radio v-model="form.qualification" label="1">I confirm that all figures in this manuscript are original.</el-radio>
<el-radio v-model="form.qualification" label="2">I confirm that all figures in this manuscript used with proper permission.</el-radio>
<el-form-item
label=""
prop="qualification_file"
v-if="form.qualification == 2"
label-width="0px"
>
<div style="position: relative;top: 4px;margin-left: 14px">
<el-upload
ref="uploadFile"
class="upload-demo up_newstyle"
:action="upload_articleApproval"
accept=".pdf"
name="articleApproval"
:before-upload="beforeupload_articleApproval"
:on-error="uperr_coverLetter"
:on-success="upSuccess_articleApproval"
:limit="1"
:on-exceed="alertlimit"
:on-remove="removefilearticleApproval"
:file-list="fileL_articleApproval"
:on-preview="dowloadFile"
>
<div class="el-upload__text" @click="clearUploadedFile">
<em>Upload</em>
</div>
<div class="el-upload__tip" slot="tip" style="color: #888;left:80px;font-size: 13px;">
Upload the copyright permission letters or license documents figures.<br/>
</div>
</el-upload>
</div>
</el-form-item>
</div>
</el-form-item>
<el-form-item
label="Has artificial intelligence been used in the article ?"
prop="approval"
label-width="340px"
>
<el-radio-group v-model="form.is_use_ai" @input="changeUseAi">
<el-radio :label="1">Yes</el-radio>
<el-radio :label="2">No</el-radio>
</el-radio-group>
<div v-if="form.is_use_ai == 1">
<el-input
type="textarea"
v-model="form.use_ai_explain"
:rows="4"
></el-input>
</div>
</el-form-item>
<div style="margin: 50px 0 30px 30px">
<el-checkbox v-model="agreechecked" style="font-weight: bold">I accept </el-checkbox>
<el-link @click="licensebox = true" type="primary" style="padding-left: 5px; font-weight: bold">
the license agreement</el-link
@@ -874,7 +938,7 @@
<el-autocomplete
class="inline-input"
v-model="authMeaIN.email"
placeholder="Email"
:fetch-suggestions="
(queryString, callback) => {
chaMateFit(queryString, callback, 1);
@@ -896,11 +960,11 @@
<span style="color: #f56c6c">*</span>
Name :
</span>
<el-input v-model="authMeaIN.firstname" placeholder="First name" style="width: 280px; margin-right: 20px"></el-input>
<el-input v-model="authMeaIN.lastname" placeholder="Last name" style="width: 280px"> </el-input>
<el-input v-model="authMeaIN.firstname" style="width: 280px; margin-right: 20px"></el-input>
<el-input v-model="authMeaIN.lastname" style="width: 280px"> </el-input>
</el-form-item>
<el-form-item label="ORCID iD :" label-width="120px">
<el-input v-model="authMeaIN.orcid" placeholder="Orcid" style="width: 280px"> </el-input>
<el-form-item label="ORCID iD :" label-width="120px" prop="orcid">
<el-input v-model="authMeaIN.orcid" style="width: 280px"> </el-input>
<a href="https://orcid.org/register" target="_blank" class="orcid_link">Register for an ORCID iD</a>
</el-form-item>
<el-form-item label="First author :" label-width="180px">
@@ -914,7 +978,7 @@
<span style="color: #f56c6c">*</span>
Title :
</span>
<el-select v-model="authMeaIN.title" placeholder="Please select" style="width: 280px" @change="chanSelt">
<el-select v-model="authMeaIN.title" style="width: 280px" @change="chanSelt" placeholder="">
<el-option key="Prof." label="Prof." value="Prof."></el-option>
<el-option key="Associate Prof." label="Associate Prof." value="Associate Prof."></el-option>
<el-option key="Assistant Prof." label="Assistant Prof." value="Assistant Prof."></el-option>
@@ -922,12 +986,12 @@
<el-option key="Others" label="Others" value="Others"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Affiliation :" label-width="120px">
<el-form-item label="Affiliation :" label-width="120px" prop="company">
<el-autocomplete
class="inline-input"
v-model="authMeaIN.company"
:fetch-suggestions="searchCompany"
placeholder="Affiliation"
:trigger-on-focus="false"
@select="selCompany($event, index)"
style="width: 100%"
@@ -935,21 +999,21 @@
</el-autocomplete>
</el-form-item>
<el-form-item label="Department :" label-width="120px">
<el-input v-model="authMeaIN.department" placeholder="Department"></el-input>
<el-input v-model="authMeaIN.department" ></el-input>
</el-form-item>
<el-form-item label="Address :" label-width="120px">
<span slot="label">
<span style="color: #f56c6c" v-show="authMeaIN.isReport">*</span>
Address :
</span>
<el-input v-model="authMeaIN.address" placeholder="Address"></el-input>
<el-input v-model="authMeaIN.address" ></el-input>
</el-form-item>
<el-form-item label-width="120px">
<span slot="label">
<span style="color: #f56c6c">*</span>
Country :
</span>
<el-select v-model="authMeaIN.country" filterable placeholder="Please select" style="width: 280px">
<el-select v-model="authMeaIN.country" filterable style="width: 280px" placeholder="">
<el-option v-for="it in countrys" :key="it.en_name" :label="it.en_name" :value="it.en_name"></el-option>
</el-select>
</el-form-item>
@@ -963,7 +1027,11 @@
</template>
<script>
import JournalSelector from '@/components/page/components/article/journal-selector.vue';
export default {
components: {
JournalSelector
},
data() {
return {
hasAIContent: ['1'],
@@ -1050,9 +1118,11 @@ export default {
manuscirpt: '',
supplementary: '',
approval_file: '',
qualification_file: '',
qualification: '',
approval_content: '',
code: '',
is_use_ai: 2,
is_use_ai: "",
use_ai_explain: ''
// topics:null
},
@@ -1110,6 +1180,20 @@ export default {
trigger: 'blur'
}
],
company: [
{
required: true,
message: 'Please enter a affiliation',
trigger: 'blur'
}
],
orcid: [
{
required: true,
message: 'Please enter a orcid',
trigger: 'blur'
}
],
type: [
{
required: true,
@@ -1168,6 +1252,13 @@ export default {
trigger: 'blur'
}
],
qualification: [
{
required: true,
message: 'Please select qualification',
trigger: 'blur'
}
],
introduction: [
{
required: true,
@@ -1196,13 +1287,7 @@ export default {
trigger: 'blur'
}
],
company: [
{
required: true,
message: 'Please enter company',
trigger: 'blur'
}
],
email: [
{
required: true,
@@ -1245,6 +1330,13 @@ export default {
trigger: 'blur'
}
],
qualification: [
{
required: true,
message: 'Please select figure copyright declaration',
trigger: 'blur'
}
],
approval_content: [
{
required: true,
@@ -1258,7 +1350,14 @@ export default {
message: 'Please upload ethical approva file',
trigger: 'blur'
}
]
],
qualification_file: [
{
required: true,
message: 'Please upload ethical approva file',
trigger: 'blur'
}
],
},
forWard: false,
authorVisible: false,
@@ -1376,6 +1475,22 @@ export default {
}
},
methods: {
handleJournalSelected(journal) {
if (journal == '') {
this.check_item = {};
this.ms_alias = '';
this.form.journal = '';
this.reviewerof.journal = 1;
console.log('this.form at line 1386:', this.form)
if (localStorage.getItem('ms_journal_alias')) {
localStorage.removeItem('ms_journal_alias');
}
} else {
this.check_item = journal;
this.ch_Jour_all(journal.journal_id);
}
},
onSubmit() {
if (!this.agreechecked) {
this.$message.error(
@@ -1385,7 +1500,7 @@ export default {
}
this.$refs.articleform.validate((valid) => {
if (this.isAbstractTooShort(this.form.abstrart)) {
this.$message.error('The abstract should not be less than 200 Chinese characters or English words!');
this.$message.error('The abstract should not be less than 200 words!');
return false;
}
//验证文档
@@ -1818,7 +1933,7 @@ export default {
// 保存修改用户信息
saveAuthor(value) {
if (value.firstname == '' || value.lastname == '' || value.title == '' || value.Country == '' || value.email == '') {
if (value.firstname == '' || value.lastname == '' || value.title == '' || value.Country == '' || value.email == ''||value.company == ''||value.orcid == '') {
this.$message.error('Please provide complete author information!');
return;
}
@@ -2440,6 +2555,7 @@ export default {
this.Reviewerof.journal = e;
this.checkReviewer();
this.form.journal = e;
this.$refs.articleform.clearValidate(['journal']);;
this.form.major = '';
this.form.major_a = '';
this.form.major_b = '';
@@ -2879,6 +2995,7 @@ export default {
if (res.code == 0) {
// 基本信息
this.form.journal = res.data.base.journal_id;
this.form.type = res.data.base.type;
this.form.title = res.data.base.title;
this.form.approval = res.data.base.approval;
@@ -2887,51 +3004,10 @@ export default {
this.form.fund = res.data.base.fund;
this.form.is_use_ai = res.data.base.is_use_ai;
this.form.use_ai_explain = res.data.base.use_ai_explain;
console.log(res.data.base);
// this.form.topics = res.data.base.topics
// 领域
console.log('this.majorValueList at line 2853:', this.majorValueList);
// this.$api
// .post('api/Major/getMajorForAddArticle', {
// journal_id: this.form.journal,
// major_id: 1
// })
// .then((res) => {
// this.majors_a = res.data.majors;
// });
// this.form.major_a = res.data.major.major_id;
// this.$api
// .post('api/Major/getMajorForAddArticle', {
// journal_id: this.form.journal,
// major_id: this.form.major_a
// })
// .then((ref) => {
// this.majors_b = ref.data.majors;
// this.majors_c = [];
// this.form.major_b = '';
// this.form.major_c = '';
// this.majorChange_panduan();
// if (res.data.major.child != undefined) {
// this.form.major_b = res.data.major.child.major_id;
// this.$api
// .post('api/Major/getMajorForAddArticle', {
// journal_id: this.form.journal,
// major_id: this.form.major_b
// })
// .then((ref) => {
// this.majors_c = ref.data.majors;
// this.form.major_c = '';
// this.majorChange_panduan();
// if (res.data.major.child.child != undefined) {
// this.form.major_c = res.data.major.child.child.major_id;
// this.majorChange_panduan();
// }
// });
// }
// });
// 关键词
let keyList = res.data.base.keywords.split(',');
if (this.items.find((e) => e.journal_id == this.form.journal)) {
this.check_item = this.items.find((e) => e.journal_id == this.form.journal);
}
this.keywordsList = [];
for (let i = 0; i < keyList.length; i++) {
this.keywordsList.push({
@@ -3047,7 +3123,7 @@ export default {
padding-bottom: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
width: calc(100% - 60px);
/* margin-bottom: 10px; */
margin-top: 20px;
}
@@ -3072,7 +3148,7 @@ export default {
}
.manu_add h3 {
font-size: 16px;
margin-bottom: 15px;
/* margin-bottom: 15px; */
margin-top: 0px;
}
</style>
@@ -3199,7 +3275,7 @@ export default {
}
.manu_add .bag_color > div {
padding: 1px 25px;
padding: 0px 15px;
/* background-color: #fff; */
/* box-shadow: 2px -30px 15px -20px #ebf5ff inset; */
}
@@ -3407,7 +3483,7 @@ export default {
}
.tuijian_f {
width: 835px;
width: calc(100% - 100px);
padding: 10px 5px 15px 5px;
margin: 20px 0px 0px 55px;
box-shadow: 0 0 8px #b7d2ed;

View File

@@ -0,0 +1,308 @@
<template>
<div class="journal-selector relative w-full max-w-md" ref="journalSelector">
<!-- 使用el-input作为输入框 -->
<div v-if="!selectedJournal">
<el-input clearable
v-model="searchTerm"
@focus="showDropdown = true"
size="medium"
class="journal-input" suffix-icon="el-icon-search"
>
<!-- 搜索图标插槽 -->
<!-- 已选择时显示清除图标 -->
<i
slot="suffix"
v-if="selectedJournal"
class="fas fa-times text-gray-400 hover:text-red-500 cursor-pointer el-input__icon"
@click.stop="clearSelection"
></i>
</el-input>
<!-- 下拉列表 -->
<div
class="journal-dropdown "
v-if="showDropdown && filteredJournals.length"
>
<div
class="journal-item "
v-for="journal in filteredJournals"
:key="journal.id"
@click="selectJournal(journal)"
>
<div class="flexBox alignCenter justBetween">
<img src="https://picsum.photos/40/40?random=1" :alt="journal.title" class="">
<div class="journal-title">{{ journal.title }}</div>
</div>
</div>
</div>
<!-- 无结果提示 -->
<div
class="journal-dropdown " style="padding: 0;"
v-if="showDropdown && !filteredJournals.length && searchTerm"
>
<div class="">
<p class="nofound">No matching journals found
Please try other keywords or spellings</p>
</div>
</div>
</div>
<!-- 选中的期刊 -->
<div
class="journal-selected"
v-if="selectedJournal&&!showDropdown"
>
<div class="flexBox alignCenter">
<img src="https://picsum.photos/40/40?random=1" :alt="selectedJournal.name" class="object-cover">
<span class="journal-selected-title">{{ selectedJournal.title }}</span>
</div>
<div class="journal-info">
{{ selectedJournal.scope }}
</div>
<span class="journal-close" @click="closeSelection">
<i class="el-icon-close"></i>
</span>
</div>
</div>
</template>
<script>
export default {
name: 'JournalSelector',
props: {
list: {
type: Array,
default: () => []
},
check_item: {
type: Object,
default: () => ({})
},
},
data() {
return {
searchTerm: '',
showDropdown: false,
selectedJournal: null,
journals: []
};
},
watch: {
list: {
handler(newVal) {
// this.journals = this.list;
// console.log('this.journals at line 96:', this.journals)
},
deep: true
},
check_item: {
handler(newVal) {
// if (newVal.id) {
if(JSON.stringify(this.check_item)!=='{}'){
this.selectedJournal = this.check_item;
}else{
this.selectedJournal = null;
}
console.log('this.selectedJournal at line 113:', this.selectedJournal)
// }
},
deep: true
}
},
computed: {
// 过滤期刊列表
filteredJournals() {
if (!this.searchTerm) {
return this.journals;
}
const term = this.searchTerm.toLowerCase();
console.log('term at line 109:', term)
return this.journals.filter(journal => journal.abbr.toLowerCase().includes(term)||
journal.title.toLowerCase().includes(term)||
journal.title.toLowerCase().includes(this.searchTerm)||
journal.title.includes(this.searchTerm)
);
}
},
methods: {
getJournalList(){
this.$api
.post('api/Article/getJournal')
.then((res) => {
this.journals = res;
})
.catch((err) => {
console.log(err);
});
},
closeSelection(){
this.selectedJournal=null
this.searchTerm = '';
this.showDropdown = false;
this.$emit('selected', '')
},
// 选择期刊
selectJournal(journal) {
this.selectedJournal = journal;
this.searchTerm = '';
this.showDropdown = false;
// 触发选中事件,方便父组件获取数据
this.$emit('selected', journal);
this.$emit('selected', journal)
},
// 清除选择
clearSelection() {
this.selectedJournal = null;
this.searchTerm = '';
this.$emit('cleared');
},
// 点击外部关闭下拉框
handleClickOutside(event) {
if (this.showDropdown && !this.$refs.journalSelector.contains(event.target)) {
this.showDropdown = false;
}
}
},
mounted() {
this.getJournalList();
document.addEventListener('click', this.handleClickOutside);
},
beforeDestroy() {
document.removeEventListener('click', this.handleClickOutside);
}
};
</script>
<style scoped>
/* 适配el-input的样式 */
.journal-input {
--el-input-height: 40px; cursor: pointer;
}
.journal-selector .title {
font-size: 14px;
font-weight: 700;
color: #333;
}
.journal-input .el-input__inner {
padding-left: 38px !important;
border-radius: 8px;
border-color: #e4e4e4;
transition: all 0.2s ease;
}
.journal-input .el-input__inner:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.journal-input .el-input__prefix {
left: 12px;
top: 50%;
transform: translateY(-50%);
}
.journal-input .el-input__suffix {
right: 12px;
}
/* 下拉列表样式 */
.journal-dropdown {
border: 1px solid #f0f0f0;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
border-radius: 8px;
margin-top: 6px;
padding: 12px 0;
box-sizing: border-box; cursor: pointer;
}
/* 列表项样式 */
.journal-item {
padding: 0 15px;
box-sizing: border-box;
border-bottom: 1px solid #f8f8f8;
margin: 0;
color: #666;
margin-bottom: 10px;
cursor: pointer;
}
.journal-item:last-child {
border-bottom: none;
}
/* 选中项样式 */
.journal-selected {
border-radius: 6px;
/* margin-top: 8px; */
border: 1px solid #DCDFE6;
font-size: 14px;color: #8c8d8f;
padding: 10px;
cursor: pointer;
position: relative;
}
.journal-selected-title{
font-size: 14px;
font-weight: 700;
color: #333;
margin-left: 14px;
line-height: 40px;
}
/* 清除按钮样式 */
.journal-clear {
transition: all 0.2s;
}
.flexBox{
display: flex;
}
.alignCenter{
align-items: center;
}
.justBetween{
justify-content: space-between;
}
.journal-title{
width: calc(100% - 60px);
}
.journal-info {
margin-top: 8px;
line-height: 20px;
text-align: justify;
}
.journal-close{
position: absolute;
top: 0px;
right: 6px;
font-size: 16px;
color: #8c8d8f;
cursor: pointer;
}
.nofound{
color: #8c8d8f;
padding-left: 10px;
}
</style>