07-vuePC端项目(学科列表)

本文主要是介绍07-vuePC端项目(学科列表)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

学科列表

其实学科列表与用户列表，企业列表基本上都是差不多的
subject文件夹的index.vue组件:

<template><div><el-card><!-- 搜索部分 --><el-form inline :model="searchForm" ref="searchFormRef" label-width="80px"><el-form-item label="学科编号" prop="rid"><el-input v-model="searchForm.rid"></el-input></el-form-item><el-form-item label="学科姓名" prop="name"><el-input v-model="searchForm.name"></el-input></el-form-item><el-form-item label="创建者" prop="username"><el-input v-model="searchForm.username"></el-input></el-form-item><el-form-item label="状态" prop="status"><el-select v-model="searchForm.status" placeholder="请选择状态"><el-option label="启用" value="1"></el-option><el-option label="禁用" value="0"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" @click="search">搜索</el-button><el-button @click="clear">清除</el-button><el-button type="primary" @click="add">+新增学科</el-button></el-form-item></el-form></el-card><!-- 表格部分 --><el-card style="margin-top:15px"><el-table :data="subjectList" border stripe><el-table-column type="index" label="序号"></el-table-column><el-table-column prop="rid" label="学科编号"></el-table-column><el-table-column prop="name" label="学科名称"></el-table-column><el-table-column prop="short_name" label="简称"></el-table-column><el-table-column prop="username" label="创建者"></el-table-column><el-table-column prop="create_time" label="创建日期"></el-table-column><el-table-column label="状态"><template slot-scope="scope"><span:style="{color:scope.row.status === 1 ? '#85ce61':'red'}">{{scope.row.status === 1? '启用':'禁用'}}</span></template></el-table-column><el-table-column width="280" label="操作"><template slot-scope="scope"><el-button type="primary" @click="editSubject(scope.row)">编辑</el-button><el-button:type="scope.row.status===1?'info':'success'"@click="changeStatus(scope.row.id)">{{scope.row.status===1?'禁用':'启用'}}</el-button><el-button type="danger" @click="deletSubject(scope.row.id)">删除</el-button></template></el-table-column></el-table><!-- 分页部分 --><div style="margin-top:15px;text-align:center"><el-pagination@size-change="sizeChange"@current-change="currentChange":current-page="page":page-sizes="[2, 4, 6, 8]":page-size="limit"layout="total, sizes, prev, pager, next, jumper":total="total"background></el-pagination></div></el-card><subject-edit ref="subjectEditRef"></subject-edit></div>
</template><script>
import SubjectEdit from "./subject-add-or-update";
export default {components: {SubjectEdit},name: "Subject",data() {return {//模型,后台需要的searchForm: {rid: "", //学科编号name: "", //学科姓名username: "", //创建者status: "" //状态},page: 1, //页码limit: 2, //页容量subjectList: [], //学科列表total: 0 //总条数};},created() {this.getSubjectData();},methods: {// 获取学科列表async getSubjectData() {const res = await this.$axios.get("/subject/list", {params: {...this.searchForm,page: this.page,limit: this.limit}});if (res.data.code == 200) {// console.log(res);this.subjectList = res.data.data.items;this.total = res.data.data.pagination.total;}},// 搜索search() {this.page = 1;this.getSubjectData();},//清除{}clear() {this.$refs.searchFormRef.resetFields();// 显示第一页this.search();},//改变状态async changeStatus(id) {const res = await this.$axios.post("/subject/status", { id });if (res.data.code == 200) {this.$message({type: "success",message: "更新状态成功"});// 更改成功之后,发送请求显示当前页面数据this.getSubjectData();} else {this.$message.error(res.data.message);}},//删除deletSubject(id) {this.$confirm("你确定删除吗?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(async () => {const res = await this.$axios.post("/subject/remove", { id });if (res.data.code == 200) {this.$message({type: "success",message: "删除成功"});// 删除成功之后,发送请求显示第一页的数据this.search();}}).catch(() => {});},// 页容量改变sizeChange(val) {this.limit = val;this.search();},//当前页改变currentChange(val) {this.page = val;this.getSubjectData();},// 新增学科add() {this.$refs.subjectEditRef.modal = "add";this.$refs.subjectEditRef.dialogVisible = true;// 解决点击新增&编辑弹出的框里面还有数据和校验的问题(清空校验在子组件watch里面)this.$refs.subjectEditRef.subjectForm = {rid: "", //学科编号name: "", //学科名称short_name: "", //学科简称intro: "", //学科简介remark: "" //备注};},// 编辑editSubject(row) {this.$refs.subjectEditRef.modal = "edit";this.$refs.subjectEditRef.dialogVisible = true;// this.$refs.subjectEditRef.subjectForm = JSON.parse(JSON.stringify(row));// row里面有很多东西,有些东西后台不一定要,看后台文档,做对象解构要部分就行const { id, rid, name, short_name, intro, remark } = row;this.$refs.subjectEditRef.subjectForm = {id, //学科idrid, //学科编号name, //学科名称short_name, //学科简称intro, //学科简介remark //备注};}}
};
</script>

效果演示:

subject文件夹的subject-add-or-update.vue组件:

<template><div class="subject"><el-dialog center :visible.sync="dialogVisible" width="600px"><div slot="title" class="title">{{ modal === "add" ? "新增学科" : "编辑学科" }}</div><!-- form表单 --><el-form :model="subjectForm" :rules="rules" ref="subjectFormRef" label-width="80px"><el-form-item label="学科编号" prop="rid"><el-input v-model="subjectForm.rid"></el-input></el-form-item><el-form-item label="学科名称" prop="name"><el-input v-model="subjectForm.name"></el-input></el-form-item><el-form-item label="学科简称" prop="short_name"><el-input v-model="subjectForm.short_name"></el-input></el-form-item><el-form-item label="学科简介" prop="intro"><el-input v-model="subjectForm.intro"></el-input></el-form-item><el-form-item label="学科备注" prop="remark"><el-input v-model="subjectForm.remark"></el-input></el-form-item></el-form><!-- 两个按钮 --><span slot="footer"><el-button @click=" dialogVisible= false">取 消</el-button><el-button type="primary" @click="submit">确 定</el-button></span></el-dialog></div>
</template><script>
export default {name: "SubjectEdit",data() {return {dialogVisible: false,modal: "", //add新增 edit编辑//这里面定义的属性是要提交给后台的subjectForm: {rid: "", //学科编号name: "", //学科名称short_name: "", //学科简称intro: "", //学科简介remark: "" //备注},rules: {rid: [{ required: true, message: "请输入学科编号", trigger: "blur" }],name: [{ required: true, message: "请输入学科名称", trigger: "blur" }],short_name: [{ required: true, message: "请输入学科简称", trigger: "blur" }],intro: [{ required: true, message: "请输入学科简介", trigger: "blur" }],remark: [{ required: true, message: "请输入学科备注", trigger: "blur" }]}};},methods: {//点击确定按钮submit() {this.$refs.subjectFormRef.validate(async valid => {if (!valid) return;let res = "";if (this.modal === "add") {res = await this.$axios.post("/subject/add", this.subjectForm);} else {res = await this.$axios.post("/subject/edit", this.subjectForm);}if (res.data.code == 200) {//提示this.$message({type: "success",message: this.modal === "add" ? "新增成功" : "编辑成功"});//关闭当前对话框this.dialogVisible = false;//调用父组件的search方法刷新学科列表this.$parent.search();} else {this.$message.error(res.data.message);}});}},//监听dialogVisible的变化watch: {dialogVisible(newValue) {//当dialogVisible为false的时候if (!newValue) {this.$refs.subjectFormRef.clearValidate(); //清空校验}}}
};
</script>

效果演示:

学科列表代码说明：

• ui展示
  • 搜索展示：el-form
  • 列表展示：el-table
  • 分页：el-pagination
• 做功能
  • 修改状态
  • 删除
  • 新增学科
    • 弹出会话框
      1、新建一个子组件，里面写上 el-dialog相关的内容
      2、让刚刚新建的子组件，成为学科列表的子组件，记得给子组件设置一个 ref 属性，方便后续操作它
      3、点击新增的时候，更改子组件中 mode 和 dialogVisible
    • 完善会话框的布局
      1、标题：使用具名插槽 slot=title
      2、内容：el-form
                 完善获取用户输入的值
                 在data中定义一个模型值，模型中的属性名要跟后台的接口中规定的属性名名字保持一致
                 把定义好的模型赋值给 el-form的 model属性
                 给 el-form-item 下面的 el-input 设置 v-model
                 在开发者工具中，通过vue的工具查看下输入的值，是否能拿到了
      3、完善校验
                 在data中定义好rules并且写好验证规则
                 在el-form设置好 rules 属性，把模型中写好的rules规则绑定到 el-form 的rules属性上面
                 在 el-form-item 上面，一定要设置好 prop
    • footer
    • 发请求，进行新增
      前提：先对我们表单做最后一次校验，然后才发送请求给后台
      调用form表单的validate方法
  • 修改学科
    • 显示要更改的内容
    • 完成修改的操作

    const { id, rid, name, short_name, intro, remark } = row;this.$refs.subjectEditRef.subjectForm = {id, // 学科idrid, // 学科编号name, // 学科名称short_name, // 学科简称intro, // 学科简介remark, // 备注};

res = await this.$axios.post('/subject/edit',this.subjectForm)//发送请求修改学科

这篇关于07-vuePC端项目(学科列表)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---