General background management system front-end interfaceⅪ——Information list page (addition and modification of pop-up reuse, basic implementation of CRUD front-end)

Language 2023-04-09 21:22:19 views: null

Because the requirements have changed a little, so I slightly changed the previous code and copied all the previous information list to the user list, and the final effect is the same. UserList.vue

<template>
  <div class="UserList">
    <!-- 查询、重置 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" @click="find()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="refresh()">刷新</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="number" label="学号" align="center" sortable>
      </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="class" label="班级" align="center">
      </el-table-column>
      <el-table-column prop="state_text" 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="操作" align="center">
        <template slot-scope="scope">
          <el-button
            @click="del(scope.row)"
            icon="el-icon-delete"
            type="danger"
            size="mini"
            circle
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            circle
          ></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>
  </div>
</template>

<script>
import { Info, InfoDel } from "@/api/api.js";
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1, //当前页数
      pageSize: 10, //每页显示条数
      total: 0,
      formInline: {
        name: ''
      }
    };
  },
  created() {
    this.getData();
  },
  computed: {
    compData() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
  methods: {
    find(){
      this.getData(this.formInline)
    },
    refresh(){
      this.formInline = {}
      this.getData(this.formInline)
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    getData(params) {
      Info(params).then((res) => {
        console.log(res.data);
        if (res.data.status === 200) {
          this.total = res.data.total;
          this.tableData = res.data.data;
          this.tableData.forEach((item) => {
            item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");
            item.state === "1"
              ? (item.state_text = "已入校")
              : item.state === "2"
              ? (item.state_text = "未入校")
              : (item.state_text = "休学中");
          });
        }
      });
    },
    del(row) {
      console.log(row);
      InfoDel(row.id).then((res) => {
        if (res.data.status === 200) {
          this.$message({ message: res.data.message, type: "success" });
          this.getData();
        }
      });
    },
  },
};
</script>

<style lang="scss">
.UserList {
  .demo-form-inline {
    text-align: left;
  }
  .el-pagination {
    text-align: left;
    margin-top: 20x;
  }
}
</style>

Adjust the layout and style of page elements: buttons, icons, etc. adjusted

UserList.vue

<template>
  <div class="UserList">
    <!-- 查询、重置 -->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      size="small"
    >
      <el-form-item>
        <el-input
          v-model="formInline.name"
          placeholder="请输入姓名"
          prefix-icon="el-icon-search"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="find()" plain round>查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="refresh()" round>刷新</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="number" label="学号" align="center" sortable>
      </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="class" label="班级" align="center">
      </el-table-column>
      <el-table-column prop="state_text" 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="操作" align="center" width="100">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            circle
            
          ></el-button>
          <el-button
            @click="del(scope.row)"
            icon="el-icon-delete"
            type="danger"
            size="mini"
            circle plain
          ></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>
  </div>
</template>

<script>
import { Info, InfoDel } from "@/api/api.js";
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1, //当前页数
      pageSize: 10, //每页显示条数
      total: 0,
      formInline: {
        name: "",
      },
    };
  },
  created() {
    this.getData();
  },
  computed: {
    compData() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
  methods: {
    find() {
      this.getData(this.formInline);
    },
    refresh() {
      this.formInline = {};
      this.getData(this.formInline);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    getData(params) {
      Info(params).then((res) => {
        console.log(res.data);
        if (res.data.status === 200) {
          this.total = res.data.total;
          this.tableData = res.data.data;
          this.tableData.forEach((item) => {
            item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");
            item.state === "1"
              ? (item.state_text = "已入校")
              : item.state === "2"
              ? (item.state_text = "未入校")
              : (item.state_text = "休学中");
          });
        }
      });
    },
    del(row) {
      console.log(row);
      InfoDel(row.id).then((res) => {
        if (res.data.status === 200) {
          this.$message({ message: res.data.message, type: "success" });
          this.getData();
        }
      });
    },
  },
};
</script>

<style lang="scss">
.UserList {
  .demo-form-inline {
    text-align: left;
  }
  .el-pagination {
    text-align: left;
    margin-top: 20x;
  }
}
</style>

Information list page implementation

Modify the table header and adjust the style according to the data returned by the interface 

 InfoList.view

<template>
  <div class="InfoList">
    <!-- 查询、重置 -->
    <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="add()"
          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="number" label="学号" align="center" sortable>
      </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>
  </div>
</template>

<script>
import { Info, InfoDel } from "@/api/api.js";
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1, //当前页数
      pageSize: 10, //每页显示条数
      total: 0,
      formInline: {
        name: "",
      },
    };
  },
  created() {
    this.getData();
  },
  computed: {
    compData() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
  methods: {
    find() {
      this.getData(this.formInline);
    },
    refresh() {
      this.formInline = {};
      this.getData(this.formInline);
    },
    del(row) {
      console.log(row);
      InfoDel(row.id).then((res) => {
        if (res.data.status === 200) {
          this.$message({ message: res.data.message, type: "success" });
          this.getData();
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    getData(params) {
      Info(params).then((res) => {
        console.log(res.data);
        if (res.data.status === 200) {
          this.total = res.data.total;
          this.tableData = res.data.data;
          this.tableData.forEach((item) => {
            item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");
            item.state === "1"
              ? (item.state_text = "已入校")
              : item.state === "2"
              ? (item.state_text = "未入校")
              : (item.state_text = "休学中");
          });
        }
      });
    },
  },
};
</script>

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

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

 New function of pop-up reuse

1. Find

 2. The trigger component is placed at the bottom of the page, and then modified as needed

         ① Realize the basic pop-up window effect (hidden, displayed after clicking)

        ② Modify form content

1. Modify the content that the user needs to fill in. In order to improve the user experience and achieve better user interaction, use the radio button to fill in the gender, and use the DatePicker date selector for the school admission time 

2. Define form validation rules and use v-model to realize two-way binding of form data

 Form effect:

 Adjust the style:

        ① Planning the label on the left

  Before adjustment After adjustment

                               

 ②Adjust the width of the pop-up dialog

3. Improve the verification rules of the form

ps: Sensitive word verification has not been introduced and used, and it needs to be improved.

<template>
  <div class="InfoList">
    <!-- 查询、重置 -->
    <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="id" label="id" align="center" sortable>
      </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="新增用户信息"
      :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="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="comfirm('newUserForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { infoList, UserDel, addInfo } from "@/api/api.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",
    };
  },
  created() {
    this.getData();
  },
  computed: {
    compData() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    // copDate() {
    //   return new Date().toLocaleDateString();
    // }
  },
  methods: {
    addUser() {
      this.dialogFormVisible = true;
    },
    comfirm(newUserForm) {
      console.log(newUserForm, this.newUserForm);
      this.$refs[newUserForm].validate(valid => {
        if(valid){
          console.log(newUserForm, this.newUserForm)
          addInfo(this.newUserForm).then(res => {
            if(res.data.status === 200){
              this.dialogFormVisible = false
              this.$message({type: 'success', message: res.data.message}
              )
            }
          })
        }
      })
    },
    find() {
      this.getData(this.formInline);
    },
    refresh() {
      this.formInline = {};
      this.getData(this.formInline);
    },
    del(row) {
      console.log(row);
      UserDel(row.id).then((res) => {
        if (res.data.status === 200) {
          this.$message({ message: res.data.message, type: "success" });
          this.getData();
        }
      });
    },
    getData(params) {
      infoList(params).then((res) => {
        console.log(res.data);
        if (res.data.status === 200) {
          this.total = res.data.total;
          this.tableData = res.data.data;
          this.tableData.forEach((item) => {
            item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");
            item.state === "1"
              ? (item.state_text = "已入校")
              : item.state === "2"
              ? (item.state_text = "未入校")
              : (item.state_text = "休学中");
          });
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
};
</script>

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

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

//信息列表的
//通用校验——判空
export function NotNullRule(rule, value, callback) {
    if (value === "") {
        callback(new Error("此处不能为空"));
    } else {
        callback();
    }
}
//新增用户的姓名校验
export function newUsernameRule(rule, value, callback) {
    let CName = /^(?:[\u4e00-\u9fa5·]{2,16})$/;
    let EName = /(^[a-zA-Z][a-zA-Z\s]{0,20}[a-zA-Z]$)/;
    if (value === "") {
        callback(new Error("请输入姓名"));
    } else if (!(CName.test(value) || EName.test(value))) {
        callback(new Error("请输入中文姓名或者20位字母以内的英文名"));
    } else{
        // forbiddenStrRule(rule, value, callback);
        callback();
    }
}
//新增用户的联系方式校验
export function phoneRule(rule, value, callback) {
    let phone = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/
    if (value === "") {
        callback(new Error("请输入手机号"));
    } else if(!phone.test(value)) {
        callback(new Error("请输入正确的手机号格式"));
    }else{
        callback();
    }
}
//新增用户的年龄校验
export function ageRule(rule, value, callback) {
    //   6-12位密码需要包含大小写字母和数字以及特殊符号
    let age = /^([1-3]|[0-9]{2})$/;
    if (value === "") {
        callback(new Error("请输入年龄"));
    } else if (!age.test(value)) {
        callback(new Error("用户年龄不合理"));
    } else {
        callback();
    }
}
//敏感词过滤
export function forbiddenStrRule(rule, value, callback) {
    //定义敏感字符
    let forbiddenArray = ['xx', '<', '>', '黄色', 'sb', 'fuck', 'md', 'laji', '靠', 'nm', 'tm', 'tmd', 'c'];
    for (var i = 0; i < forbiddenArray.length; i++) {
        if(value.indexOf(forbiddenArray[i])){
            // value = value.replace(forbiddenArray[i], "*");
            callback(new Error("有敏感词，请重新输入。"));
        }else{
            return callback();
        }
    }
    
}
//新增用户的入校时间校验
export function timeRule(rule, value, callback) {
    console.log(value)
    let time = new Date();
    // value.join(" ");
    let year = time.getFullYear().toString();
    let month = (time.getMonth() + 1).toString();
    let date = time.getDate().toString();
    let dateValue = value.split("/");
    console.log(dateValue)
    if (value === "") {
        callback(new Error("请输入入校时间"));
    } else if (year === dateValue[0]) {
        if (month === dateValue[1] && date >= dateValue[2]) {
            console.log("1")
            callback();
        } else if (month > dateValue[1]) {
            console.log("2")
            callback();
        }
    } else if (year > dateValue[0]) {
        console.log(year)
        console.log(dateValue[0])
        console.log("3")
        callback();
    } else {
        callback(new Error("用户选择的时间错误，还未到时间"));
    }
}

 4. Encapsulate the API request interface and connect to the backend

Create a click event, and print and view the passed data object - new user information.

Click OK to validate the form:

send request:

 After confirming that the backend data interface is successfully added, the form should be refreshed, so improve the query interface of the information list , which is similar to the query interface of the user list

Pay attention to the display problem of gender format conversion here: because sex is a string type, so add '' here

Demo:

  Pop-up reuse modification function

ps: There is no () for dynamic loading, it is not a function, and it is monitored in computed. so

connect backend

 Since the same form is used for adding and modifying, when you click the OK button, you need to first determine whether to add or modify to initiate a request like the backend, that is, according to the status of the forrm form title: true means modification, false means new increase.

test:

※ When modifying again, the data is not bound but backed up, so as to avoid users who do not understand the principles of computers. When modifying the form data, the list data also changes at the same time. If they do not click OK, they mistakenly think that the data has been modified successfully. So instead of assigning directly:

Cancel button:

InfoList.view: 

<template>
  <div class="InfoList">
    <!-- 查询、重置 -->
    <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="comfirm('newUserForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { infoList, UserDel, addInfo, updateInfo } from "@/api/api.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() {
    this.getData();
  },
  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 };
    },
    comfirm(newUserForm) {
      this.$refs[newUserForm].validate((valid) => {
        if (valid) {
          if (this.formState) {
            updateInfo(this.newUserForm).then((res) => {
              if (res.data.status === 200) {
                this.getData();
                this.dialogFormVisible = false;
                this.$message({ type: "success", message: res.data.message });
              }
            });
          } else {
            addInfo(this.newUserForm).then((res) => {
              if (res.data.status === 200) {
                this.getData();
                this.dialogFormVisible = false;
                this.$message({ type: "success", message: res.data.message });
              }
            });
          }
        }
      });
    },
    closeForm(newUserForm) {
      this.$refs[newUserForm].resetFields();
      this.dialogFormVisible = false;
    },
    find() {
      this.getData(this.formInline);
    },
    refresh() {
      this.formInline = {};
      this.getData(this.formInline);
    },
    del(row) {
      console.log(row);
      UserDel(row.id).then((res) => {
        if (res.data.status === 200) {
          this.$message({ message: res.data.message, type: "success" });
          this.getData();
        }
      });
    },
    getData(params) {
      infoList(params).then((res) => {
        console.log(res.data);
        if (res.data.status === 200) {
          this.total = res.data.total;
          this.tableData = res.data.data;
           this.tableData.forEach((item) => {
             item.sex === '1' ? (item.sex_text = "男") : (item.sex_text = "女");
           });
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
};
</script>

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

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

 api.js

//信息列表
//查询  
export function infoList(param){
    return service({
        method: 'get',
        url: '/info',
        param
    })
}
//新增用户接口
export function addInfo(data){
    data = qs.stringify(data)
    return service({
        method: 'post',
        url: '/info',
        data
    })
}
//修改信息接口
export function updateInfo(data){
    data = qs.stringify(data)
    return service({
        method: 'put',
        url: '/info',
        data
    })
}

Query, delete single button function

 

 InfoList.view

<el-table>
   <el-table-column fixed="right" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button
            @click="del(scope.row)"
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
          ></el-button>
        </template>
    </el-table-column>
</el-table>
    del(row) {
      console.log(row);
      this.$alert("你确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        callback: () => {
          delInfo(row.id).then((res) => {
            if (res.data.status === 200) {
              this.$message({ message: res.data.message, type: "success" });
              this.getData();
            }
          });
        },
      });
    },

 api.js

//删除信息接口
export function delInfo(id){
    return service({
        method: 'delete',
        url: `/info/${id}`
    })
}

API interface that encapsulates new and modified information:

There is a small problem with the above:

test: 

 The conditional query and batch deletion of the information list are not written in the backend, so there are only buttons here that are not really implemented.

Guess you like

Origin blog.csdn.net/qq_45947664/article/details/128048772
Recommended
The number of MaxKB GitHub Stars, an open source knowledge base question and answer system based on large language models, exceeded 5,000!
Ranking
Getting the basic concepts of ROS + catkin Profile
Spring Learning (2) --- Assembling Beans in the IoC Container
js to get the src attribute of the image regularly
STM32 is based on CubeIDE and HAL library basics entry study notes: Bluetooth WIFI STM32 connects to Alibaba Cloud
Short video learning - 3, pandas simple use of pivot_table
Print directory of project configuration log, output log
Understand the difference between vi and vim in Linux in 3 minutes
1 + x certificate Web front-end development HTML5 special exercises
mangodb save and insert the difference
7-1 Family tree processing (50 points) (binary tree solution)
Daily
More
2024-05-13(8)
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)

Code World

© 2018 codetd.com