Mysql+Nodejs+Koa2+Vue+Quasar零起点教
【Mysql+Nodejs+Koa2+Vue+Quasar零起点教程11：应用界面开发】中涉及的user.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="user_name" 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="username" label="登录用户名" v-if="selected.length == 0" clearable />
<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="userinfo.user_name" prefix="登录用户名：" hint="（必须确保唯一）" clearable />
<q-input v-model="userinfo.user_pwd" prefix="登录密码：" hint="（不允许为空）" clearable />
<q-input v-model="userinfo.user_fullname" prefix="真实姓名：" 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 {
updateuser,
userpagelist
} from "../service/interface1";
export default ({
data() {
return {
$q: useQuasar(),
selected: [],
loading: false,
username: '',
pagination: {
sortBy: 'user_name',
descending: false,
page: 1,
rowsPerPage: 10,
rowsNumber: 0
},
columns: [{
name: 'id',
align: 'center',
label: '操作',
field: row => row.user_name
}, {
name: 'user_name',
align: 'center',
label: '登录用户名',
field: 'user_name',
sortable: true
},
{
name: 'user_pwd',
align: 'center',
label: '登录密码',
field: 'user_pwd',
sortable: true
},
{
name: 'user_fullname',
align: 'center',
label: '真实姓名',
field: 'user_fullname'
}
],
serverData: [],
v_optype: -1, //1 insert,2 update,3 delete
editDialog: false,
userinfo: {
user_name: '',
user_pwd: '',
user_fullname: ''
}
}
},
methods: {
async onRequest(props) {
const {
page,
rowsPerPage,
sortBy,
descending
} = props.pagination;
this.loading = true;
this.serverData = [];
let query = {
username: this.username,
pageIndex: page,
pageSize: rowsPerPage,
sortBy: sortBy,
descending: descending
};
let dataRes = await userpagelist(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.userinfo.user_name = '';
this.userinfo.user_pwd = '';
this.userinfo.user_fullname = '';
this.v_optype = 1;
this.editDialog = true;
},
editRecord(thisrow) {
this.userinfo.user_name = thisrow.user_name;
this.userinfo.user_pwd = thisrow.user_pwd;
this.userinfo.user_fullname = thisrow.user_fullname;
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.userinfo.user_name = snum;
this.userinfo.user_pwd = "";
this.userinfo.user_fullname = "";
};
let query = {
optype: this.v_optype,
username: this.userinfo.user_name,
userpwd: this.userinfo.user_pwd,
userfullname: this.userinfo.user_fullname
};
let dataRes = await updateuser(query);
this.editDialog = false;
this.searchRecord();
},
},
computed: {},
mounted() {
this.searchRecord();
},
watch: {},
})
</script>
<style scoped>
</style>
