java微服务框架之Student

Posted 2020-12-16 潇洒哥浩浩

<template>
<div class="student">

<el-row>
<el-col :span="3">
<el-button @click="insertDalogVisible=true">新增</el-button>
</el-col>
<el-col :span="21">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="学生姓名">
<el-input v-model="formInline.name" placeholder="学生姓名"></el-input>
</el-form-item>
<el-form-item label="科目">
<el-input v-model="formInline.cname" placeholder="请输入科目"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="stuNo" label="学号" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column v-for="c in cousesName" :label="c">
<template slot-scope="scope">
<span v-for="item in scope.row.houseList" v-if="item.name==c">{{item.fraction}}</span>
</template>
</el-table-column>

<el-table-column prop="zfen" label="总成绩">

</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="openEdit(scope.row)">修改</el-button>
<el-button>删除</el-button>
</template>
</el-table-column>
</el-table>
<el-row>
<el-col>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
:page-sizes="sizes" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</el-col>
</el-row>

<el-dialog title="提示" :visible.sync="insertDalogVisible" width="30%">

<el-form ref="form" :model="insertForm" label-width="100px" class="demo-dynamic">

<el-form-item label="学号">
<el-input style="width: 50%;" v-model="insertForm.stuNo"></el-input>
</el-form-item>
<el-form-item label="学生名称">
<el-input style="width: 50%;" v-model="insertForm.name"></el-input>
</el-form-item>

<el-form-item label="科目" v-for="(sb,index) in insertForm.houseList">
<el-input style="width: 25%;" v-model="insertForm.houseList[index].name"> </el-input>&nbsp;
成绩 <el-input style="width: 25%;" v-model="insertForm.houseList[index].fraction"></el-input>&nbsp;

<el-button @click.prevent="removeDomain(sb)">删除</el-button>
</el-form-item>
<el-form-item>
<el-button @click="addStus">保存学生</el-button>
<el-button @click="addDomain">新增科目</el-button>
</el-form-item>
</el-form>
</el-dialog>

<el-dialog title="提示" :visible.sync="editDalogVisible" width="30%">

<el-form ref="form" :model="editForm" label-width="100px" class="demo-dynamic">

<el-form-item label="学号">
<el-input :disabled="true" style="width: 50%;" v-model="editForm.stuNo"></el-input>
</el-form-item>
<el-form-item label="学生名称">
<el-input :disabled="true" style="width: 50%;" v-model="editForm.name"></el-input>
</el-form-item>

<el-form-item label="科目" v-for="(sb,index) in editForm.houseList">
<el-input style="width: 25%;" v-model="editForm.houseList[index].name"> </el-input>&nbsp;
成绩 <el-input style="width: 25%;" v-model="editForm.houseList[index].fraction"></el-input>&nbsp;

<el-button @click.prevent="removeDomain(sb)">删除</el-button>
</el-form-item>
<el-form-item>
<el-button @click="addStus">修改</el-button>
<el-button @click="addDomain">新增科目</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>

<script>
export default {
data() {
return {
editDalogVisible: false,
formInline: {
name: ‘‘,
cname: ‘‘
},
tableData: [],
zcj: [],
cousesName: [‘语文‘, ‘数学‘, ‘英语‘, ‘物理‘, ‘化学‘, ‘生物‘],
insertDalogVisible: false,
insertForm: {
stuNo: ‘‘,
name: ‘‘,
houseList: [{
name: ‘‘,
fraction: ‘‘
}],
},
total: 0,
page: 1,
size: 3,
sizes: [2, 3, 5],
editForm: {
stuNo: ‘‘,
name: ‘‘,
houseList: [{
name: ‘‘,
fraction: ‘‘
}],
},
}
},
created: function() {
this.initData();
},
methods: {
openEdit(row) {
console.log(row);
this.editDalogVisible = true;
Object.assign(this.editForm, row);

},
onSubmit() {
console.log(this.formInline);
this.initData();
},
handleSizeChange(val) {
this.size = val;
this.initData();
},
handleCurrentChange(val) {
this.page = val;
this.initData();
},
addStus() {
if (this.insertDalogVisible) {
console.log(this.insertForm);
this.axios.post(‘http://localhost:8800/api/student/insert‘, this.insertForm).then((res) => {
if (res.data.result) {
this.$message.success(‘添加成功‘);
this.insertDalogVisible = false;
this.initData();
}
});
} else if (this.editDalogVisible) {
console.log(this.editForm);
this.axios.post(‘http://localhost:8800/api/student/insert‘, this.editForm).then((res) => {
if (res.data.result) {
this.$message.success(‘修改成功‘);
this.editDalogVisible = false;
this.initData();
}
});
}

},
removeDomain(item) {
if (this.insertDalogVisible) {
var index = this.insertForm.houseList.indexOf(item)
if (index !== -1) {
this.insertForm.houseList.splice(index, 1)
}
} else if (this.editDalogVisible) {
var index = this.editForm.houseList.indexOf(item)
if (index !== -1) {
this.editForm.houseList.splice(index, 1)
}
}

},
addDomain() {
if (this.insertDalogVisible) {
this.insertForm.houseList.push({
name: ‘‘,
fraction: ‘‘
});
} else if (this.editDalogVisible) {
this.editForm.houseList.push({
name: ‘‘,
fraction: ‘‘
});
}

},
initData() {
this.axios.get(‘http://localhost:8800/api/student/list‘, {
params: {
page: this.page,
size: this.size,
name: this.formInline.name,
cname: this.formInline.cname
}
}).then((res) => {
console.log(res);
this.tableData = res.data.result.content;
this.total = res.data.result.totalElements;

var arr = [];

for (var i = 0; i < this.tableData.length; i++) {
arr[i] = 0;
for (var j = 0; j < this.tableData[i].houseList.length; j++) {
arr[i] += this.tableData[i].houseList[j].fraction;

}
this.tableData[i].zfen = arr[i];
}
console.log(this.tableData);
});
}
}
}
</script>