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>