2024年5月27日第五十六篇

今天做了一个网页开发，联系了自己的增删改查，和弹出式表单的设计。

<template>
  <el-container class="layout-container-demo">
    <el-aside width="200px">
      <el-scrollbar>
        <el-menu :default-openeds="['1', '3']">
          <el-sub-menu index="1">
            <template #title>
             
            </template>
            <el-menu-item-group>
              <template #title>Group 1</template>
              <el-menu-item  index="1-1">学生信息管理</el-menu-item>
             
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header style="text-align: center; font-size: 12px;"> 
        <h1 class="text-black-blue font-bold font-large" style="display: inline-block; vertical-align: middle;">学生信息管理系统</h1>

    

      </el-header>
      <br>
      <div>
    <el-button type="primary" size="small" @click="openDialog">
      打开表单
    </el-button>
    <el-dialog
      title="填写表单"
      :visible="dialogVisible"
      @close="closeDialog"
    >
      <el-form :model="form">
        <el-form-item label="名字" :label-width="formLabelWidth">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
      <!-- <div class="toolbar" style="display: flex; gap: 10px;">
    <div>
      政策名称<el-input style="width: 200px" placeholder="请输入政策名称" v-model="name" />
    </div>
    <div>
      发文字号<el-input style="width: 200px" placeholder="请输入发文字号" v-model="document" />
    </div>
    <div>
      发文机构<el-input style="width: 200px" placeholder="请输入发文机构" v-model="organ" />
    </div>
    <div>
      全文检索<el-input style="width: 200px" placeholder="" v-model="content" />
    </div>
    <div>
      <el-button type="primary" @click="search">搜索</el-button>
    </div>
  </div> -->
  <div>
    <el-table :data="currentPageData" style="width: 100%">
    <el-table-column label="学号" prop="snum" />
    <el-table-column label="姓名" prop="name" />
    <el-table-column label="性别" prop="gender" />
    <el-table-column label="出生日期" prop="birthday" />
    <el-table-column label="操作">
      <template v-slot="scope">
        <el-button 
          size="small" 
          type="primary" 
          @click="handleEdit(scope.row)">编辑</el-button>
        <el-button 
          size="small" 
          type="danger" 
          @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<div style="display: flex; justify-content: center;">
  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :current-page="currentPage"
    @current-change="handleCurrentChange"
    :page-size="pageSize"
  />
</div>

</div>
    </el-container>
  </el-container>
</template>
<script setup>
import {  onMounted,computed, ref} from 'vue'
import { api } from '@/api/apis'
import { ElMessage } from 'element-plus';
import { ElMessageBox } from 'element-plus'

const dialogVisible = ref(false)

const handleClose = (done) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
const currentPageData = ref([]);
const currentPage = ref(1); 
const pageSize = ref(10); 
const total = ref(0); 
let drawerData =ref('')
let studentdata =ref('')
const handleCurrentChange = (newPage) => {
  // 根据新的页码更新当前页的数据
  currentPage.value = newPage;
  const startIndex = (newPage - 1) * pageSize.value;
  currentPageData.value = student.value.slice(startIndex, startIndex + pageSize.value);
}

function openDialog() {
      dialogVisible = true;
    }
function closeDialog() {
      this.dialogVisible = false;
    },
    submitForm() {
      // 提交表单的逻辑
      console.log('Form submitted:', this.form);
      this.dialogVisible = false;
    }
  }
function showDrawer(row) {
       drawerData = row; // 更新当前行的数据
      this.drawer = true; // 打开 el-drawer
    }
function handleEdit(row) {
      console.log('Edit:', row);
      // Add your edit logic here
    }
function handleDelete(row){
  console.log('Delete:', row);
  studentdata=row;
  console.log('Delete:', studentdata);
  api.studentApi.delete(studentdata).then((res) => {
    ElMessage.success('删除成功');
    fetchSystemList();
  })
}
onMounted(() => { 
  fetchSystemList();
 
});

function fetchSystemList() {
    api.studentApi.get().then((res) => {
      student.value = res.data
      currentPageData.value = student.value.slice(0, pageSize.value);
      total.value = student.value.length;
    })
  }
const drawer = ref(false)
  const student=ref([])

const name=ref('')
const document=ref('')
const organ=ref('')
const content=ref('')
function search(){
  api.studentApi.search(name.value,document.value,organ.value,content.value).then((res) => {
    student.value = res.data;
    currentPageData.value = student.value.slice(0, pageSize.value);
      total.value = student.value.length;
  })
}

</script>

<style scoped>
.button-container {
  display: flex;
  justify-content: center; /* 水平居中 */
}

.layout-container-demo {
  width: 100%;
}
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.text-center {
  text-align: center;
}

.text-black-blue {
  color: #0000FF; /* 黑蓝色 */
}

.font-bold {
  font-weight: bold; /* 加粗 */
}

.font-large {
  font-size: 36px;
}
.el-drawer__wrapper.custom-modal {
  background-color: rgba(0, 0, 0, 0.5) !important;
}


</style>

 

<template>

  <el-container class="layout-container-demo">

    <el-aside width="200px">

      <el-scrollbar>

        <el-menu :default-openeds="['1', '3']">

          <el-sub-menu index="1">

            <template #title>

             

            </template>

            <el-menu-item-group>

              <template #title>Group 1</template>

              <el-menu-item  index="1-1">学生信息管理</el-menu-item>

             

            </el-menu-item-group>

          </el-sub-menu>

        </el-menu>

      </el-scrollbar>

    </el-aside>

    <el-container>

      <el-header style="text-align: center; font-size: 12px;">

        <h1 class="text-black-blue font-bold font-large" style="display: inline-block; vertical-align: middle;">学生信息管理系统</h1>

   

      </el-header>

      <br>

      <div>

    <el-button type="primary" size="small" @click="openDialog">

      打开表单

    </el-button>

    <el-dialog

      title="填写表单"

      :visible="dialogVisible"

      @close="closeDialog"

    >

      <el-form :model="form">

        <el-form-item label="名字" :label-width="formLabelWidth">

          <el-input v-model="form.name"></el-input>

        </el-form-item>

        <el-form-item label="邮箱" :label-width="formLabelWidth">

          <el-input v-model="form.email"></el-input>

        </el-form-item>

      </el-form>

      <template v-slot:footer>

        <span class="dialog-footer">

          <el-button @click="closeDialog">取消</el-button>

          <el-button type="primary" @click="submitForm">提交</el-button>

        </span>

      </template>

    </el-dialog>

  </div>

      <!-- <div class="toolbar" style="display: flex; gap: 10px;">

    <div>

      政策名称<el-input style="width: 200px" placeholder="请输入政策名称" v-model="name" />

    </div>

    <div>

      发文字号<el-input style="width: 200px" placeholder="请输入发文字号" v-model="document" />

    </div>

    <div>

      发文机构<el-input style="width: 200px" placeholder="请输入发文机构" v-model="organ" />

    </div>

    <div>

      全文检索<el-input style="width: 200px" placeholder="" v-model="content" />

    </div>

    <div>

      <el-button type="primary" @click="search">搜索</el-button>

    </div>

  </div> -->

  <div>

    <el-table :data="currentPageData" style="width: 100%">

    <el-table-column label="学号" prop="snum" />

    <el-table-column label="姓名" prop="name" />

    <el-table-column label="性别" prop="gender" />

    <el-table-column label="出生日期" prop="birthday" />

    <el-table-column label="操作">

      <template v-slot="scope">

        <el-button

          size="small"

          type="primary"

          @click="handleEdit(scope.row)">编辑</el-button>

        <el-button

          size="small"

          type="danger"

          @click="handleDelete(scope.row)">删除</el-button>

      </template>

    </el-table-column>

  </el-table>

<div style="display: flex; justify-content: center;">

  <el-pagination

    background

    layout="prev, pager, next"

    :total="total"

    :current-page="currentPage"

    @current-change="handleCurrentChange"

    :page-size="pageSize"

  />

</div>

</div>

    </el-container>

  </el-container>

</template>

<script setup>

import {  onMounted,computed, ref} from 'vue'

import { api } from '@/api/apis'

import { ElMessage } from 'element-plus';

import { ElMessageBox } from 'element-plus'

const dialogVisible = ref(false)

const handleClose = (done) => {

  ElMessageBox.confirm('Are you sure to close this dialog?')

    .then(() => {

      done()

    })

    .catch(() => {

      // catch error

    })

}

const currentPageData = ref([]);

const currentPage = ref(1);

const pageSize = ref(10);

const total = ref(0);

let drawerData =ref('')

let studentdata =ref('')

const handleCurrentChange = (newPage) => {

  // 根据新的页码更新当前页的数据

  currentPage.value = newPage;

  const startIndex = (newPage - 1) * pageSize.value;

  currentPageData.value = student.value.slice(startIndex, startIndex + pageSize.value);

}

function openDialog() {

      dialogVisible = true;

    }

function closeDialog() {

      this.dialogVisible = false;

    },

    submitForm() {

      // 提交表单的逻辑

      console.log('Form submitted:', this.form);

      this.dialogVisible = false;

    }

  }

function showDrawer(row) {

       drawerData = row; // 更新当前行的数据

      this.drawer = true; // 打开 el-drawer

    }

function handleEdit(row) {

      console.log('Edit:', row);

      // Add your edit logic here

    }

function handleDelete(row){

  console.log('Delete:', row);

  studentdata=row;

  console.log('Delete:', studentdata);

  api.studentApi.delete(studentdata).then((res) => {

    ElMessage.success('删除成功');

    fetchSystemList();

  })

}

onMounted(() => {

  fetchSystemList();

 

});

function fetchSystemList() {

    api.studentApi.get().then((res) => {

      student.value = res.data

      currentPageData.value = student.value.slice(0, pageSize.value);

      total.value = student.value.length;

    })

  }

const drawer = ref(false)

  const student=ref([])

const name=ref('')

const document=ref('')

const organ=ref('')

const content=ref('')

function search(){

  api.studentApi.search(name.value,document.value,organ.value,content.value).then((res) => {

    student.value = res.data;

    currentPageData.value = student.value.slice(0, pageSize.value);

      total.value = student.value.length;

  })

}

</script>

<style scoped>

.button-container {

  display: flex;

  justify-content: center; /* 水平居中 */

}

.layout-container-demo {

  width: 100%;

}

.layout-container-demo .el-header {

  position: relative;

  background-color: var(--el-color-primary-light-7);

  color: var(--el-text-color-primary);

}

.layout-container-demo .el-aside {

  color: var(--el-text-color-primary);

  background: var(--el-color-primary-light-8);

}

.layout-container-demo .el-menu {

  border-right: none;

}

.layout-container-demo .el-main {

  padding: 0;

}

.layout-container-demo .toolbar {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  height: 100%;

  right: 20px;

}

.text-center {

  text-align: center;

}

.text-black-blue {

  color: #0000FF; /* 黑蓝色 */

}

.font-bold {

  font-weight: bold; /* 加粗 */

}

.font-large {

  font-size: 36px;

}

.el-drawer__wrapper.custom-modal {

  background-color: rgba(0, 0, 0, 0.5) !important;

}

</style>