General background management system front-end interfaceⅫ——Information management page (addition, deletion, modification, query and encapsulation)

Data rendering method encapsulation - getData()

Create a new table.js under utils

 Copy the information list to the information management page, modify the class name of the root node to InfoLists, and change the scss at the same time, and use the encapsulated getData method on the information management page

 Add and modify method encapsulation

 unpackaged

 shallow packaging

 Package again:

table.js

 Remove method encapsulation

 debug: New data is added successfully but there is no prompt

 Since I don't have the problem of clearing the verification information, and adding this sentence, I will report an error, so it doesn't matter if I comment it out.

 InfoLists.view

<template>
  <div class="InfoLists">
    <!-- 查询、重置 -->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      size="small"
    >
      <el-form-item>
        <el-input
          v-model="formInline.name"
          prefix-icon="el-icon-search"
          placeholder="请输入姓名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          @click="find()"
          type="primary"
          icon="el-icon-search"
          circle
          size="small"
        ></el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="success"
          @click="addUser()"
          circle
          size="small"
          icon="el-icon-circle-plus-outline"
        ></el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="success"
          plain
          @click="refresh()"
          circle
          size="small"
          icon="el-icon-refresh"
        ></el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="danger"
          plain
          @click="delPitch()"
          circle
          size="small"
          icon="el-icon-delete"
        ></el-button>
      </el-form-item>
    </el-form>
    <!-- <el-table :data="
      tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
    " height="450" border style="width: 100%" :default-sort="{ prop: 'number', order: 'Ascending' }"> -->
    <el-table
      :data="compData"
      height="450"
      border
      style="width: 100%"
      :default-sort="{ prop: 'number', order: 'Ascending' }"
    >
      <!-- <el-table-column prop="id" label="序号" align="center"></el-table-column> -->
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="name" label="姓名" align="center">
      </el-table-column>
      <el-table-column prop="sex_text" label="性别" align="center">
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="center" sortable>
      </el-table-column>
      <el-table-column prop="father" label="父亲" align="center">
      </el-table-column>
      <el-table-column prop="mather" label="母亲" align="center">
      </el-table-column>
      <el-table-column prop="time" label="入校时间" align="center">
      </el-table-column>
      <el-table-column prop="address" label="家庭住址" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="联系方式" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button
            @click="edit(scope.row)"
            type="primary"
            icon="el-icon-edit"
            circle
            size="mini"
          ></el-button>
          <el-button
            @click="del(scope.row)"
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 30, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <el-dialog
      :title="compTitle"
      :visible.sync="dialogFormVisible"
      width="500px"
    >
      <el-form :model="newUserForm" :rules="rules" ref="newUserForm">
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="newUserForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="性别"
          :label-width="formLabelWidth"
          prop="sex"
          icon="el-icon-male"
        >
          <el-radio v-model="newUserForm.sex" label="1"
            ><i class="el-icon-male"></i>男</el-radio
          >
          <el-radio v-model="newUserForm.sex" label="2"
            ><i class="el-icon-female"></i>女</el-radio
          >
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
          <el-input v-model="newUserForm.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="父亲姓名"
          :label-width="formLabelWidth"
          prop="father"
        >
          <el-input v-model="newUserForm.father" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="母亲姓名"
          :label-width="formLabelWidth"
          prop="mather"
        >
          <el-input v-model="newUserForm.mather" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="入校时间"
          :label-width="formLabelWidth"
          prop="time"
        >
          <el-date-picker
            v-model="newUserForm.time"
            align="right"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy/MM/dd"
            type="date"
            placeholder="选择入校日期"
            :picker-options="pickAfter"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item
          label="家庭住址"
          :label-width="formLabelWidth"
          prop="address"
        >
          <el-input v-model="newUserForm.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="联系方式"
          :label-width="formLabelWidth"
          prop="phone"
        >
          <el-input v-model="newUserForm.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeForm('newUserForm')">取 消</el-button>
        <el-button type="primary" @click="confirm('newUserForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getData, changeInfo, delData } from "@/utils/table.js";
import {
  NotNullRule,
  newUsernameRule,
  ageRule,
  phoneRule,
} from "@/utils/validate";
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1, //当前页数
      pageSize: 10, //每页显示条数
      total: 0,
      dialogFormVisible: false,
      formInline: {
        name: "",
      },
      newUserForm: {
        name: "",
        sex: "1",
        age: "",
        father: "",
        mather: "",
        time: "",
        address: "",
        phone: "",
      },
      pickAfter: {
        disabledDate(time) {
          return time.getTime() > Date.now(); // 如果没有后面的-8.64e7就是不可以选择今天的
        },
      },
      rules: {
        name: [{ validator: newUsernameRule, trigger: "blur", required: true }],
        sex: [{ validator: NotNullRule, trigger: "blur", required: true }],
        age: [{ validator: ageRule, trigger: "blur", required: true }],
        time: [{ validator: NotNullRule, trigger: "blur", required: true }],
        address: [{ validator: NotNullRule, trigger: "blur", required: true }],
        phone: [{ validator: phoneRule, trigger: "blur", required: true }],
      },
      formLabelWidth: "80px",
      formState: true,
    };
  },
  created() {
    getData(this, '/info');
  },
  computed: {
    compData() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    compTitle() {
      return this.formState ? "修改用户信息" : "新增用户信息";
    },
  },
  methods: {
    addUser() {
      this.formState = false;
      this.dialogFormVisible = true;
      this.newUserForm = {
        name: "",
        sex: "1",
        age: "",
        father: "",
        mather: "",
        time: "",
        address: "",
        phone: "",
      };
    },
    edit(row) {
      this.formState = true;
      this.dialogFormVisible = true;
      // this.newUserForm =  row;
      this.newUserForm = { ...row };
    },
    confirm(newUserForm) {
      this.$refs[newUserForm].validate((valid) => {
        if (valid) {
          let methods = ''
          this.formState ? methods = 'put' : methods = 'post'
          changeInfo(this, methods, '/info', this.newUserForm, getData)
        }
      });
    },
    closeForm(newUserForm) {
      this.$refs[newUserForm].resetFields();
      this.dialogFormVisible = false;
    },
    find() {
      this.getData(this.formInline);
    },
    refresh() {
      this.formInline = {};
      this.getData(this.formInline);
    },
    del(row) {
      delData(this, '/info', row.id, getData)
    },
    
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
};
</script>

<style lang="scss">
.InfoLists {
  .demo-form-inline {
    text-align: left;
  }

  .el-pagination {
    text-align: left;
    margin-top: 20x;
  }
}
</style>

 table.js

//获取表格数据
export function getData(root, url, params) {
    root.service
        .get(url, { params: params || {} })
        .then((res) => {
            if (res.data.status === 200) {
                root.tableData = res.data.data;
                root.total = res.data.total;
                root.tableData.forEach((item) => {
                    item.sex === '1' ? (item.sex_text = "男") : (item.sex_text = "女");
                  });
            }
        })
        .catch((error) => {
            throw error;
        });
}

//新增和修改
import qs from "qs";
export function changeInfo(root, method, url, form, callback) {
    let data = qs.stringify(form);
    root.service[method](url, data)
        .then((res) => {
            if (res.data.status === 200) {
                callback(root, url); // = root.getData()
                // root.$refs['form'].resetFields();
                root.dialogFormVisible = false;
                root.$message({ message: res.data.message, type: "success" });
            }
        })
        .catch((error) => {
            throw error;
        });
}
//删除
export function delData(root, url, id, callback) {
    root.$alert("你确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        callback: () => {
            root.service
                .delete(`${url}/${id}`)
                .then((res) => {
                    if (res.data.status === 200) {
                        callback(root, url); // = root.getData()
                        root.$message({ message: res.data.message, type: "success" });
                    }
                })
                .catch((error) => {
                    throw error;
                });
        },
    });
}

 In fact, there is a problem with the modification backend here, and the data row object id should be passed for modification.