自研国产零依赖前端UI框架实战009 数组相关方法和新增修改功能实现

Java私教
75 阅读5分钟

前言

我们已经实现了用户管理相关的页面,为此也封装了很多的组件.

按照原本的计划, 我们还要封装一些常用的操作数组的方法.

将元素插入数组的任意位置

// 将元素插入数组的指定位置
const insert = (
    arr, // 数组
    element,  // 元素
    index, // 指定索引
) => {
    if (index < 0 || index > arr.length) return
    arr.splice(index, 0, element);
    return arr;
}

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
insert(arr, 11, 3)
console.log(arr)

将元素插入数组头部

封装一个js的方法, 这个方法接收一个数组和一个元素, 能够将元素响应式的插入数组的头部.

// 将元素插入数组的指定位置
const insert = (
    arr, // 数组
    element,  // 元素
    index, // 指定索引
) => {
    if (index < 0 || index > arr.length) return
    arr.splice(index, 0, element);
    return arr;
}

// 将元素插入数组的头部
const insertHead = (
    arr, // 数组
    element,  // 元素
) => {
    insert(arr, element, 0);
    return arr;
}

let arr = [1, 2, 3];
insert(arr, 11, 1)
console.log(arr)
insertHead(arr, 33)
console.log(arr)

这样我们就可以得到一个新增用户以后, 将新用户插入到数组头部的简便方法.

移除指定的元素

// 移除指定索引的元素
const remove = (arr, index) => {
    if (index < 0 || index >= arr.length) return
    arr.splice(index, 1);
    return arr;
}

// 移除末尾的元素
const pop = (arr) => {
    remove(arr, arr.length - 1);
    return arr;
}


let arr = [1, 2, 3];
remove(arr, 1)
console.log(arr)
pop(arr)
console.log(arr)

根据id查找索引

function getIndexById(arr, id) {
    for (let i = 0; i < arr.length; i++) if (arr[i].id === id) return i
    return -1
}

let arr = [
    {id: 1},
    {id: 2},
    {id: 3},
];
console.log(getIndexById(arr, 3));

下一步做什么

我们现在有了一些数组的简单方法, 下一步就是把这些方法用起来.

我们可以先把项目跑起来, 然后逐步完成剩下的功能.

比如新增用户的功能.

我们现在看看现在的项目长什么样?

在这里插入图片描述

在这里插入图片描述

实现添加的功能

比如我添加一个叫李四的用户:

在这里插入图片描述

在这里插入图片描述

添加完毕以后, 李四这个用户要在表格的第一行展示出来.

在这里插入图片描述

在这里插入图片描述

效果实现了, 非常的nice, 这和我们之前做的努力有很大的关系.

因为我们这里的核心代码就下面几行, 非常的简单.

let newUser = {
  id: random.id1(),
  name: formDataUser.name,
  age: formDataUser.age,
}
array.insertFirst(data.value, newUser)

此时App.vue完整代码如下:

<script setup>
import zdp_table1 from "./zdpui/components/zdp_table1.vue";
import zdp_page1 from "./zdpui/components/zdp_page1.vue";
import random from "./zdpui/js/random.js";
import {reactive, ref} from "vue";
import zdp_confirm1 from "./zdpui/components/zdp_confirm1.vue";
import zdp_modal1 from "./zdpui/components/zdp_modal1.vue";
import Zdp_input1 from "./zdpui/components/zdp_input1.vue";
import Zdp_button1 from "./zdpui/components/zdp_button1.vue";
import array from "./zdpui/js/array.js";

const columns = [
  {
    title: "员工编号",
    key: "id",
    width: 80,
    align: "center"
  },
  {
    title: "姓名",
    key: "name",
    width: 100,
    align: "center"
  },
  {
    title: "年龄",
    key: "age",
    width: 100,
    align: "center"
  }
]

const page = ref(1);
const size = ref(10);
const total = ref(100);
const data = ref(random.users(size.value))

const onChangePage = (v) => {
  page.value = v
  const newData = random.getPageUser(
      page.value,
      size.value,
  )
  data.value = newData.data
  total.value = total.value
}

const isEdit = ref(false);
const onEdit = (index, item) => {
  console.log("编辑", index, item)
  isEdit.value = true;
  isShowUserDialog.value = true;
  formDataUser.name = item.name
  formDataUser.age = item.age
  modalTitle.value = "编辑用户"
}
const onDelete = (index, item) => {
  console.log("删除", index, item)
  showDeleteDialog.value = true;
}
const showDeleteDialog = ref(false);
const onConfirmDelete = () => {
  console.log("确认删除");
  showDeleteDialog.value = false;
};
const onCloseDeleteDialog = () => {
  console.log("取消删除");
  showDeleteDialog.value = false;
};

const isShowUserDialog = ref(false);
const formDataUser = reactive({name: "张三", age: 23});
const modalTitle = ref("编辑用户");

const onSaveUser = () => {
  console.log("保存用户", formDataUser);
  isShowUserDialog.value = false;

  if (isEdit.value) {

  } else {
    let newUser = {
      id: random.id1(),
      name: formDataUser.name,
      age: formDataUser.age,
    }
    array.insertFirst(data.value, newUser)
  }

  isEdit.value = false;
  formDataUser.name = ""
  formDataUser.age = 0
};

const handleCloseDialog = () => {
  isShowUserDialog.value = false;
};
const onShowAddUserModal = () => {
  isShowUserDialog.value = true;
  formDataUser.name = ""
  formDataUser.age = 0
  modalTitle.value = "新增用户"
};
</script>
<template>
  <div>
    <zdp_button1
        @click="onShowAddUserModal"
        text="新增"
    />
    <zdp_table1
        :columns="columns"
        :data="data"
        @edit="onEdit"
        @delete="onDelete"
    />
    <zdp_page1
        :page="page"
        :size="size"
        :total="total"
        @change="onChangePage"
    />
    <zdp_confirm1
        :show="showDeleteDialog"
        @confirm="onConfirmDelete"
        @close="onCloseDeleteDialog"
    />
    <zdp_modal1
        :show="isShowUserDialog"
        :title="modalTitle"
        @confirm="onSaveUser"
        @close="handleCloseDialog"
    >
      <zdp_input1
          label="姓名"
          v-model="formDataUser.name"
          placeholder="请输入姓名"
      />
      <zdp_input1
          label="年龄"
          type="number"
          v-model="formDataUser.age"
          placeholder="请输入年龄"
      />
    </zdp_modal1>
  </div>
</template>

实现编辑的功能

当我点击编辑按钮的时候, 弹出一个编辑的对话框, 此时对话框里面显示的是要编辑的用户信息.

在这里插入图片描述

在这里插入图片描述

当我编辑信息, 点击修改以后, 表格里面对应的数据要发生修改.

在这里插入图片描述

在这里插入图片描述

一切都比较完美.

这里有两个核心的方法, 一个是点击编辑按钮的时候触发的显示编辑对话框的方法.

const onShowEditDialog = (index, item) => {
  console.log("编辑", index, item)
  isEdit.value = true;
  isShowUserDialog.value = true;
  editId.value = item.id
  editIndex.value = index
  formDataUser.name = item.name
  formDataUser.age = item.age
  modalTitle.value = "编辑用户"
}

另一个是当点击对话框中的保存按钮, 触发的修改数据的方法.

data.value[editIndex.value] = {
  id: editId.value,
  ...formDataUser,
};

此时App.vue的完整代码如下.

<script setup>
import zdp_table1 from "./zdpui/components/zdp_table1.vue";
import zdp_page1 from "./zdpui/components/zdp_page1.vue";
import random from "./zdpui/js/random.js";
import {reactive, ref} from "vue";
import zdp_confirm1 from "./zdpui/components/zdp_confirm1.vue";
import zdp_modal1 from "./zdpui/components/zdp_modal1.vue";
import Zdp_input1 from "./zdpui/components/zdp_input1.vue";
import Zdp_button1 from "./zdpui/components/zdp_button1.vue";
import array from "./zdpui/js/array.js";

const columns = [
  {
    title: "员工编号",
    key: "id",
    width: 80,
    align: "center"
  },
  {
    title: "姓名",
    key: "name",
    width: 100,
    align: "center"
  },
  {
    title: "年龄",
    key: "age",
    width: 100,
    align: "center"
  }
]

const page = ref(1);
const size = ref(10);
const total = ref(100);
const data = ref(random.users(size.value))

const onChangePage = (v) => {
  page.value = v
  const newData = random.getPageUser(
      page.value,
      size.value,
  )
  data.value = newData.data
  total.value = total.value
}

const isEdit = ref(false);
const editId = ref(0);
const editIndex = ref(0);

// 点击编辑, 显示编辑对话框
const onShowEditDialog = (index, item) => {
  console.log("编辑", index, item)
  isEdit.value = true;
  isShowUserDialog.value = true;
  editId.value = item.id
  editIndex.value = index
  formDataUser.name = item.name
  formDataUser.age = item.age
  modalTitle.value = "编辑用户"
}

const onDelete = (index, item) => {
  console.log("删除", index, item)
  showDeleteDialog.value = true;
}
const showDeleteDialog = ref(false);
const onConfirmDelete = () => {
  console.log("确认删除");
  showDeleteDialog.value = false;
};
const onCloseDeleteDialog = () => {
  console.log("取消删除");
  showDeleteDialog.value = false;
};

const isShowUserDialog = ref(false);
const formDataUser = reactive({name: "张三", age: 23});
const modalTitle = ref("编辑用户");

// 点击对话框中的保存按钮
const onSave = () => {
  console.log("保存用户", formDataUser);
  isShowUserDialog.value = false;

  if (isEdit.value) {
    data.value[editIndex.value] = {
      id: editId.value,
      ...formDataUser,
    };
  } else {
    let newUser = {
      id: random.id1(),
      name: formDataUser.name,
      age: formDataUser.age,
    }
    array.insertFirst(data.value, newUser)
  }

  isEdit.value = false;
  formDataUser.name = ""
  formDataUser.age = 0
};

const handleCloseDialog = () => {
  isShowUserDialog.value = false;
};
const onShowAddUserModal = () => {
  isShowUserDialog.value = true;
  formDataUser.id = 0
  formDataUser.name = ""
  formDataUser.age = 0
  modalTitle.value = "新增用户"
};
</script>
<template>
  <div>
    <zdp_button1
        @click="onShowAddUserModal"
        text="新增"
    />
    <zdp_table1
        :columns="columns"
        :data="data"
        @edit="onShowEditDialog"
        @delete="onDelete"
    />
    <zdp_page1
        :page="page"
        :size="size"
        :total="total"
        @change="onChangePage"
    />
    <zdp_confirm1
        :show="showDeleteDialog"
        @confirm="onConfirmDelete"
        @close="onCloseDeleteDialog"
    />
    <zdp_modal1
        :show="isShowUserDialog"
        :title="modalTitle"
        @confirm="onSave"
        @close="handleCloseDialog"
    >
      <zdp_input1
          label="姓名"
          v-model="formDataUser.name"
          placeholder="请输入姓名"
      />
      <zdp_input1
          label="年龄"
          type="number"
          v-model="formDataUser.age"
          placeholder="请输入年龄"
      />
    </zdp_modal1>
  </div>
</template>

总结

目前为止, 关于用户管理系统最基础的增删改查相关的功能我们就算是彻底完成了.

不过目前的代码相对而言还是比较复杂, 有没有办法让其变得更加的简单呢?

比如我们能不能封装一个CRUD组件, 让其引入以后就自动拥有了增删改查这些写好的功能?

比如我们的js代码能不能封装成统一的组合式API,方便复用?

当然是可行的,让我们继续学习吧!!!

avatar
文章
阅读
粉丝