298 lines
10 KiB
Vue
298 lines
10 KiB
Vue
<template>
|
|
<div class="educationOutline">
|
|
<div style="height: 100%" v-if="pageType == 1">
|
|
<div class="educationOutline_header" v-if="$route.path.indexOf('/project/')==-1">
|
|
<el-button type="primary" icon="el-icon-plus" size="small" @click="addDialog">新增</el-button>
|
|
</div>
|
|
<div class="educationOutline_list">
|
|
<vue-scroll style="height: 100%">
|
|
<div class="list_box" v-if="tableData.length>0">
|
|
<div class="list_item" v-for="(item,index) in tableData" :key="index+'Outline'">
|
|
<div class="img_box" @click="changPageType(item,2)">
|
|
<img src="./../assets/images/educationOutline.png"/>
|
|
<div class="img_mask">
|
|
<span>进入题库</span>
|
|
</div>
|
|
</div>
|
|
<div class="list_title">
|
|
{{item.libraryName}}
|
|
</div>
|
|
<div class="list_actions" v-if="$route.path.indexOf('/project/')==-1">
|
|
<el-button
|
|
class="edit_btn"
|
|
size="mini"
|
|
type="text"
|
|
icon="el-icon-edit-outline"
|
|
@click="handleEdit(item)">编辑</el-button>
|
|
<el-button
|
|
class="delete_btn"
|
|
size="mini"
|
|
type="text"
|
|
icon="el-icon-delete"
|
|
@click="handleDelete(item)">删除</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="placeholderBox" v-else>
|
|
<img src="@/assets/images/noData2-dark.png" alt="" srcset="">
|
|
</div>
|
|
</vue-scroll>
|
|
</div>
|
|
<formDialog :title="dialogTitle" v-if="showDialog" @closeDialog="close">
|
|
<div slot="content" class="dialog-content">
|
|
<div class="form-item">
|
|
<span class="redText">*</span> 题库名称：
|
|
<el-input size="small" v-model="outlineName" style="width: 282px" placeholder="请输入内容"></el-input>
|
|
</div>
|
|
<div class="btn_box">
|
|
<el-button class="cancel_btn" size="small" icon="el-icon-circle-close" @click="close">取消</el-button>
|
|
<el-button size="small" icon="el-icon-circle-check" type="primary" @click="submitData">确认</el-button>
|
|
</div>
|
|
</div>
|
|
</formDialog>
|
|
</div>
|
|
<div style="height: 100%" v-else>
|
|
<el-page-header
|
|
@back="goBack"
|
|
content="题库详情"
|
|
class="backText"
|
|
></el-page-header>
|
|
<educationQuestions :libraryId="itemId"></educationQuestions>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import formDialog from './../workstation/compontents/formDialog.vue'
|
|
import educationQuestions from './educationQuestions.vue'
|
|
import {wirelessLibraryAddApi,wirelessLibraryDeleteApi,wirelessLibraryEditApi,wirelessLibraryListApi} from "@/assets/js/api/wirelessEducation"
|
|
export default {
|
|
components:{
|
|
educationQuestions,
|
|
formDialog
|
|
},
|
|
data(){
|
|
return{
|
|
pageType: 1,
|
|
showDialog: false,
|
|
dialogTitle: "新增题库",
|
|
outlineName: "",
|
|
itemId: "",
|
|
tableData:[],
|
|
isAdd:true
|
|
}
|
|
},
|
|
mounted(){
|
|
this.loadData()
|
|
},
|
|
methods:{
|
|
//获取题库列表
|
|
loadData(){
|
|
wirelessLibraryListApi({sn:this.$store.state.userInfo.headquartersSn}).then((res) => {
|
|
this.tableData=res.result
|
|
});
|
|
},
|
|
deleteFn(){
|
|
wirelessLibraryDeleteApi({id:this.itemId}).then((res) => {
|
|
this.loadData()
|
|
this.$message.success('删除成功！');
|
|
});
|
|
},
|
|
//保存题库信息
|
|
submitData(){
|
|
if(this.outlineName==''){
|
|
this.$message.error('请输入题库名称')
|
|
return false;
|
|
}
|
|
// this.$refs["add_form"].validate((valid) => {
|
|
// if (valid) {
|
|
let json = {
|
|
libraryName:this.outlineName,
|
|
sn:this.$store.state.userInfo.headquartersSn,
|
|
type:2
|
|
}
|
|
if (this.isAdd) {
|
|
wirelessLibraryAddApi(json).then((res) => {
|
|
this.showDialog = false;
|
|
this.loadData();
|
|
this.$message.success(
|
|
this.$t("message.personnelPosition.add_success")
|
|
); //编辑成功！
|
|
});
|
|
} else {
|
|
json.id=this.itemId
|
|
wirelessLibraryEditApi(json).then((res) => {
|
|
this.showDialog = false;
|
|
this.loadData();
|
|
this.$message.success(
|
|
this.$t("message.personnelPosition.edit_success")
|
|
); //编辑成功！
|
|
});
|
|
}
|
|
// } else {
|
|
// console.log("error submit!!");
|
|
// return false;
|
|
// }
|
|
// });
|
|
},
|
|
goBack(){
|
|
this.pageType = 1
|
|
},
|
|
changPageType(item,val){
|
|
this.itemId=item.id;
|
|
this.outlineName=item.libraryName
|
|
this.pageType = 2
|
|
},
|
|
addDialog(){
|
|
this.outlineName = ""
|
|
this.isAdd=true
|
|
this.showDialog = true
|
|
this.dialogTitle = "新增题库"
|
|
},
|
|
close(){
|
|
this.showDialog = false;
|
|
this.outlineName = ""
|
|
},
|
|
handleEdit(item){
|
|
this.itemId=item.id;
|
|
this.outlineName=item.libraryName
|
|
this.isAdd=false
|
|
this.showDialog = true
|
|
this.dialogTitle = "编辑题库"
|
|
},
|
|
handleDelete(item){
|
|
this.itemId=item.id;
|
|
this.outlineName=item.libraryName
|
|
this.$confirm('确定删除“'+this.outlineName+'”吗?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.deleteFn()
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消删除'
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.educationOutline{
|
|
width: 100%;
|
|
height: 100%;
|
|
.educationOutline_header{
|
|
height: 72px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding-top: 19px;
|
|
padding-left: 21px;
|
|
}
|
|
.educationOutline_list{
|
|
height: 85%;
|
|
.list_box{
|
|
display: flex;
|
|
padding: 20px;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
.list_item{
|
|
width: 314px;
|
|
// height: 314px;
|
|
box-sizing: border-box;
|
|
padding: 20px;
|
|
background: #142E59;
|
|
margin-right: 20px;
|
|
margin-bottom: 34px;
|
|
border-radius: 5px;
|
|
.img_box{
|
|
width: 274px;
|
|
height: 191px;
|
|
background: #102346;
|
|
margin: 0 auto;
|
|
padding-top: 18px;
|
|
box-sizing: border-box;
|
|
margin-bottom: 21px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
img{
|
|
display: block;
|
|
margin: 0 auto;
|
|
height: 162px;
|
|
width: 210px;
|
|
}
|
|
.img_mask{
|
|
transform: translateY(100%);
|
|
transition: all 0.3s linear;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(13, 26, 52, 0.8);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
span{
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
.img_box:hover .img_mask{
|
|
transform: translateY(0);
|
|
}
|
|
.list_title{
|
|
font-size: 18px;
|
|
color: #D6DAE2;
|
|
}
|
|
}
|
|
}
|
|
.list_actions{
|
|
margin-top: 10px;
|
|
.edit_btn{
|
|
color: #919BB1;
|
|
/deep/.el-icon-edit-outline{
|
|
color: #66B1C4;
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
.delete_btn{
|
|
color: #A35060;
|
|
/deep/.el-icon-delete{
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.dialog-content{
|
|
width: 678px;
|
|
padding-top: 44px;
|
|
padding-bottom: 46px;
|
|
.form-item{
|
|
text-align: center;
|
|
margin-bottom: 41px;
|
|
}
|
|
.btn_box{
|
|
display: flex;
|
|
margin: 0 auto;
|
|
justify-content: center;
|
|
.cancel_btn{
|
|
margin-right: 80px;
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.backText {
|
|
margin: -10px 0 0 0;
|
|
}
|
|
.jyjzPage .backText{
|
|
margin: 15px 15px 0;
|
|
/deep/.el-page-header__content{
|
|
color: white;
|
|
}
|
|
}
|
|
</style> |