1
This commit is contained in:
xulu
183
src/components/page/chiefperiod.vue
Normal file
183
src/components/page/chiefperiod.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item>
|
||||
<i class="el-icon-connection"></i> Journal list
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="container">
|
||||
<el-table :data="tableData" border stripe class="table" ref="multipleTable" header-cell-class-name="table-header">
|
||||
<el-table-column prop="title" label="title" width="320px"></el-table-column>
|
||||
<el-table-column label="chief" align="center">
|
||||
<template slot-scope="scope">
|
||||
<div v-for="item in scope.row.chief">
|
||||
{{item.realname==''?item.account:(item.realname!=''?item.account+' ('+item.realname+')':'')}}
|
||||
<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(item)"></el-button>
|
||||
</div>
|
||||
<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">Choice</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="issn" label="issn" width="130px"></el-table-column>
|
||||
<el-table-column prop="email" label="email" width="240px"></el-table-column>
|
||||
<el-table-column prop="website" label="website" width="300px"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 选择弹出框 -->
|
||||
<el-dialog title="Choice editor" :visible.sync="editVisible" width="30%">
|
||||
<el-form ref="edit_Form" :model="editForm" :rules="rules" label-width="80px">
|
||||
<el-form-item label="title">
|
||||
<template slot-scope="scope">
|
||||
{{editForm.title}}
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item label="chief" prop="chief">
|
||||
<el-select v-model="editForm.user_id" filterable placeholder="Please select the editor in chief" value-key="groupID"
|
||||
style="width: 250px;">
|
||||
<el-option v-for="item in chietry"
|
||||
:label="item.realname==''?item.account:(item.realname!=''?item.account+' ('+item.realname+')':'')"
|
||||
:key="item.user_id" :value="item.user_id"></el-option>
|
||||
</el-select>
|
||||
</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(editForm)">OK</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
editVisible: false,
|
||||
editForm: {},
|
||||
idx: -1,
|
||||
chietry: [],
|
||||
rules: {
|
||||
account: [{
|
||||
required: true,
|
||||
message: 'Please input account',
|
||||
trigger: 'blur'
|
||||
}]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getdate();
|
||||
},
|
||||
methods: {
|
||||
// 获取列表数据
|
||||
getdate() {
|
||||
this.$api
|
||||
.post('api/Chief/getJournalForChief')
|
||||
.then(res => {
|
||||
this.tableData = res.data.journals;
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
// 编辑操作
|
||||
handleEdit(index, row) {
|
||||
this.idx = index;
|
||||
this.editForm = Object.assign({}, row);
|
||||
// 获取下拉数据
|
||||
this.$api
|
||||
.post('api/Chief/getChiefList')
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
this.chietry = res.data.chiefs;
|
||||
for (let i = 0; i < this.chietry.length; i++) {
|
||||
for (let r = 0; r < this.editForm.chief.length; r++) {
|
||||
if (this.chietry[i].user_id == this.editForm.chief[r].user_id) {
|
||||
this.chietry.splice(i, 1);
|
||||
if (i == 0) {
|
||||
i = 0
|
||||
} else {
|
||||
i = i - 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
this.$message.error(err);
|
||||
});
|
||||
|
||||
this.editVisible = true;
|
||||
},
|
||||
// 保存编辑
|
||||
saveEdit(editForm) {
|
||||
this.$refs.edit_Form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$api
|
||||
.post('api/Chief/addChiefToJournal', this.editForm)
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
this.editVisible = false;
|
||||
this.$message.success(`更改第 ${this.idx + 1} 行成功`);
|
||||
this.getdate();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
this.$message.error(err);
|
||||
});
|
||||
} else {
|
||||
this.$message.error('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除操作
|
||||
handleDelete(item) {
|
||||
// 二次确认删除
|
||||
this.$confirm('Are you sure you want to delete？', 'Delete', {
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
this.$api
|
||||
.post('api/Chief/delChiefToJournal', item)
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功');
|
||||
this.getdate();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
this.$message.error(err);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.handle-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #ff0000;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user