Mysql+Nodejs+Koa2+Vue+Quasar零起点教
【Mysql+Nodejs+Koa2+Vue+Quasar零起点教程11：应用界面开发】中涉及的student.vue文件源代码
<template>
<div class="q-pa-md">
<q-card class="my-card">
<q-card-section class="bg-grey-3">
<div class="text-h6">学生信息管理</div>
<div class="text-subtitle2">对学生信息进行增、删、改、查询操作</div>
</q-card-section>
<q-table :rows="serverData" :columns="columns" row-key="student_num" separator="cell" :loading="loading" selection="multiple" v-model:selected="selected" v-model:pagination="pagination" @request="onRequest" rows-per-page-label="每页记录数"
no-data-label="没有数据">
<template v-slot:top>
<q-btn color="negative" delete icon="delete" @click="delRecord" v-if="selected.length > 0" label="删除选中" />
<q-input color="primary" v-model="studentname" label="学生姓名" v-if="selected.length == 0">
<template v-slot:append>
<q-icon v-if="studentname !== ''" name="cancel" @click="studentname = ''" class="cursor-pointer" />
</template>
</q-input>
<q-input color="primary" v-model="studentsex" label="学生性别" class="q-ml-sm" v-if="selected.length == 0">
<template v-slot:append>
<q-icon v-if="studentsex !== ''" name="cancel" @click="studentsex = ''" class="cursor-pointer" />
</template>
</q-input>
<q-btn class="q-ml-sm" icon="search" color="primary" :disable="loading" label="查询" @click="searchRecord" v-if="selected.length == 0" />
<q-btn class="q-ml-sm" icon="add" color="primary" :disable="loading" label="新增" @click="addRecord" v-if="selected.length == 0" />
</template>
<template v-slot:body-cell-id="props">
<q-td :props="props" style="width:40px;">
<q-btn small round push glossy dense icon="edit" color="primary" @click="editRecord(props.row)">
<q-tooltip>编辑当前记录</q-tooltip>
</q-btn>
</q-td>
</template>
</q-table>
</q-card>
<q-dialog v-model="editDialog" persistent transition-show="scale" transition-hide="scale">
<q-card class="my-card" style="width: 300px">
<q-card-section class="bg-teal text-white">
<div class="text-h6">学生信息</div>
</q-card-section>
<q-card-section class="q-pt-none">
<q-input v-model="studentinfo.student_num" prefix="学号：" hint="（必须确保唯一）" clearable />
<q-input v-model="studentinfo.student_name" prefix="姓名：" clearable />
<q-input v-model="studentinfo.student_sex" prefix="性别：" clearable />
<q-input v-model="studentinfo.student_birth" prefix="出生日期：" hint="（点击最后的日历选择日期）" type="date" clearable />
</q-card-section>
<q-card-actions align="right" class="bg-teal text-white">
<q-btn icon="save" color="secondary" label="保存" @click="saveRecord" />
<q-btn icon="reply" color="red" label="关闭" v-close-popup />
</q-card-actions>
</q-card>
</q-dialog>
</div>
</template>
<script>
import {
useQuasar
} from 'quasar';
import {
studentpagelist,
updatestudent
} from "../service/interface1";
export default ({
data() {
return {
$q: useQuasar(),
selected: [],
loading: false,
studentname: '',
studentsex: '',
pagination: {
sortBy: 'student_num',
descending: false,
page: 1,
rowsPerPage: 10,
rowsNumber: 0
},
columns: [{
name: 'id',
align: 'center',
label: '操作',
field: row => row.student_num
}, {
name: 'student_num',
align: 'center',
label: '学号',
field: 'student_num',
sortable: true
},
{
name: 'student_name',
align: 'center',
label: '学生姓名',
field: 'student_name',
sortable: true
},
{
name: 'student_sex',
align: 'center',
label: '学生性别',
field: 'student_sex'
},
{
name: 'student_birth',
align: 'center',
label: '出生日期',
field: 'student_birth'
}
],
serverData: [],
v_optype: -1, //1 insert,2 update,3 delete
editDialog: false,
studentinfo: {
student_num: null,
student_name: '',
student_sex: '',
student_birth: ''
}
}
},
methods: {
async onRequest(props) {
const {
page,
rowsPerPage,
sortBy,
descending
} = props.pagination;
this.loading = true;
this.serverData = [];
let query = {
studentname: this.studentname,
studentsex: this.studentsex,
pageIndex: page,
pageSize: rowsPerPage,
sortBy: sortBy,
descending: descending
};
let dataRes = await studentpagelist(query);
if (dataRes.data.data[0]) {
this.serverData = dataRes.data.data[0];
this.pagination.rowsNumber = dataRes.data.data[1][0].rowscount;
};
this.pagination.page = page;
this.pagination.rowsPerPage = rowsPerPage;
this.pagination.sortBy = sortBy;
this.pagination.descending = descending;
setTimeout(() => {
this.loading = false;
}, 500);
},
searchRecord() {
this.onRequest({
pagination: this.pagination,
filter: undefined
})
},
addRecord() {
this.studentinfo.student_num = null;
this.studentinfo.student_name = '';
this.studentinfo.student_sex = '';
this.studentinfo.student_birth = '';
this.v_optype = 1;
this.editDialog = true;
},
editRecord(thisrow) {
this.studentinfo.student_num = thisrow.student_num;
this.studentinfo.student_name = thisrow.student_name;
this.studentinfo.student_sex = thisrow.student_sex;
this.studentinfo.student_birth = thisrow.student_birth;
this.v_optype = 2;
this.editDialog = true;
},
delRecord() {
this.$q.dialog({
title: '删除确认',
message: '您确认选中的记录删除吗?',
cancel: true,
persistent: true
}).onOk(() => {
this.v_optype = 3;
for (let i = 0; i < this.selected.length; i++) {
this.saveRecord(this.selected[i].student_num);
};
this.selected = [];
this.searchRecord();
}).onOk(() => {}).onCancel(() => {}).onDismiss(() => {});
},
async saveRecord(snum) {
if (this.v_optype == 3) {
this.studentinfo.student_num = snum;
this.studentinfo.student_name = "";
this.studentinfo.student_sex = "";
this.studentinfo.student_birth = "";
};
let query = {
optype: this.v_optype,
studentnum: this.studentinfo.student_num,
studentname: this.studentinfo.student_name,
studentsex: this.studentinfo.student_sex,
studentbirth: this.studentinfo.student_birth
};
let dataRes = await updatestudent(query);
this.editDialog = false;
this.searchRecord();
},
},
computed: {},
mounted() {
this.searchRecord();
},
watch: {},
})
</script>
<style scoped>
</style>
