vue表格页面通用功能模块

旧城等待， 2022-10-04 13:57 257阅读 0赞

# 例1： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

前端：

<template>
      <div style="padding: 10px">
        <el-card>
          <div>
            供货商名称：
            <el-input
              clearable
              v-model="formQuery.name"
              placeholder="输入供货商名称"
              style="width: 200px; margin: 10px"
            />地址：
            <el-input
              clearable
              v-model="formQuery.address"
              placeholder="输入地址"
              style="width: 200px; margin: 10px"
            />电话号码：
            <el-input
              clearable
              v-model="formQuery.phone"
              placeholder="输入电话号码"
              style="width: 200px; margin: 10px"
            />邮箱：
            <el-input
              clearable
              v-model="formQuery.email"
              placeholder="输入邮箱"
              style="width: 200px; margin: 10px"
            />联系人名字：
            <el-input
              clearable
              v-model="formQuery.contactPersonName"
              placeholder="输入联系人名字"
              style="width: 200px; margin: 10px"
            />联系人电话：
            <el-input
              clearable
              v-model="formQuery.contactPhone"
              placeholder="输入联系人电话"
              style="width: 200px; margin: 10px"
            />备注：
            <el-input
              clearable
              v-model="formQuery.note"
              placeholder="输入备注"
              style="width: 200px; margin: 10px"
            />
            <el-button type="success" icon="el-icon-search" @click="fuzzyQuery()"
              >模糊查询</el-button
            >
            <el-button
              type="success"
              icon="el-icon-refresh-left"
              @click="formQuery = {}"
              >重置</el-button
            >
          </div>
          <el-button type="primary" icon="el-icon-plus" @click="handleAdd"
            >新增</el-button
          >
          <el-button @click="deleteMultiSuppliers()" type="danger" plain>
            <i class="el-icon-delete" /> 批量删除
          </el-button>
    
          <el-card style="margin-top: 20px">
            <div slot="header" class="clearfix">
              <span>供货商列表</span>
              <el-button
                @click="getSuppliersList()"
                plain
                style="float: right; margin-left: 10px"
              >
                <i class="el-icon-refresh" /> 刷新
              </el-button>
              <ExportExcel
                :multipleSelection="multipleSelection"
                :fieldName="exportExcelData.fieldName"
                :fieldValue="exportExcelData.fieldValue"
                @exported="clearSelect()"
                style="float: right"
              ></ExportExcel>
            </div>
            <el-table
              ref="ref_table_suppliers"
              :data="
                tableData.slice(
                  (pageInfo.currentPage - 1) * pageInfo.pageSize,
                  pageInfo.currentPage * pageInfo.pageSize
                )
              "
              stripe
              style="width: 100%"
              v-loading="loading"
              @selection-change="handleSelectionChange"
              :row-key="getRowKeys"
            >
              <el-table-column
                type="selection"
                :reserve-selection="true"
                width="55"
              >
              </el-table-column>
              <el-table-column
                type="index"
                label="#"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="name"
                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 prop="email" label="邮箱" align="center">
                <template slot-scope="scope">{
       { scope.row.email }}</template>
              </el-table-column>
              <el-table-column
                prop="contactPersonName"
                label="联系人名字"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="contactPhone"
                label="联系人电话"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="note"
                label="备注"
                align="center"
              ></el-table-column>
              <el-table-column prop="date" label="更新日期" align="center" sortable>
                <template slot-scope="scope">
                  {
       { scope.row.date | formatDate }}
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="200">
                <template slot-scope="scope">
                  <el-button
                    type="warning"
                    @click.native.prevent="showEditDialog(scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    type="danger"
                    @click.native.prevent="handleDel(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageInfo.currentPage"
              :page-sizes="[2, 5, 10, 20, 50, 100, 1000]"
              :page-size="pageInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageInfo.pageTotal"
              style="margin: 10px 0"
            ></el-pagination>
          </el-card>
        </el-card>
        <DialogSuppliers
          :dialogSuppliers="dialogSuppliers"
          :formData="formData"
          @addSuppliers="addSuppliers"
          @editSuppliers="editSuppliers"
        ></DialogSuppliers>
      </div>
    </template>
    
    <script>
    import {
      getSuppliersList,
      addSuppliers,
      editSuppliers,
      deleteSuppliers,
      deleteMultiSuppliers,
      fuzzyQuery,
    } from "@/api/inputManage/suppliers.js";
    import DialogSuppliers from "@/components/inputManage/suppliers/dialogSuppliers";
    import ExportExcel from "@/components/ExportExcel/index.vue";
    export default {
      components: {
        DialogSuppliers,
        ExportExcel,
      },
      data() {
        return {
          formQuery: {
            name: "",
            address: "",
            phone: "",
            email: "",
            contactPersonName: "",
            contactPhone: "",
            note: "",
          },
    
          tableData: [],
          //分页
          pageInfo: {
            currentPage: 1,
            pageSize: 5,
            pageTotal: 20,
          },
          loading: false,
          dialogSuppliers: {
            show: false,
            title: "",
          },
          formData: {},
          exportExcelData: {
            fieldName: ["供货商名称", "地址", "电话号码", "邮箱"],
            fieldValue: ["name", "address", "phone", "email"],
          },
    
          multipleSelection: [],
        };
      },
    
      mounted() {
        this.getSuppliersList();
      },
    
      methods: {
        //清除选择框
        clearSelect() {
          this.$refs["ref_table_suppliers"].clearSelection();
        },
        //多页选择数据回显，分页记录保存选中的数据
        getRowKeys(row) {
          return row._id;
        },
        //每页列表数量
        handleSizeChange(val) {
          this.pageInfo.pageSize = val;
        },
        //当前页
        handleCurrentChange(val) {
          this.pageInfo.currentPage = val;
        },
        //模糊查询
        async fuzzyQuery() {
          let { data } = await fuzzyQuery({ data: this.formQuery });
          this.tableData = data;
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        //批量删除用户
        async deleteMultiSuppliers() {
          if (this.multipleSelection.length == 0) {
            this.$message.warning("请选择要删除的记录");
            return;
          }
          this.$confirm("此操作将永久删除所选记录, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(async () => {
            let ids = [];
            this.multipleSelection.forEach((item) => {
              ids.push(item._id);
            });
            await deleteMultiSuppliers({ ids });
            this.$message.success("删除成功");
            this.getSuppliersList();
          });
        },
        // 新增按钮触发
        handleAdd() {
          this.dialogSuppliers = {
            show: true,
            title: "新增记录",
            option: "add",
          };
          this.formData = {
            name: "",
            address: "",
            phone: "",
            email: "",
            contactPersonName: "",
            contactPhone: "",
            note: "",
          };
        },
        // 获取供货商列表
        async getSuppliersList() {
          this.loading = true;
          let { data } = await getSuppliersList();
          this.tableData = data;
          this.loading = false;
          this.pageInfo.pageTotal = this.tableData.length;
        },
        //新增供货商
        async addSuppliers() {
          await addSuppliers(this.formData);
          this.$message.success("新建成功！");
          this.dialogSuppliers.show = false;
          this.getSuppliersList();
        },
        //删除供货商
        handleDel(row) {
          this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(async () => {
            await deleteSuppliers(row._id);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getSuppliersList();
          });
        },
        //打开编辑供货商窗口
        showEditDialog(row) {
          this.dialogSuppliers = {
            show: true,
            title: "编辑记录",
            option: "edit",
          };
          this.formData = {
            id: row._id,
            name: row.name,
            phone: row.phone,
            email: row.email,
            address: row.address,
            contactPersonName: row.contactPersonName,
            contactPhone: row.contactPhone,
            note: row.note,
          };
        },
        //更新供货商
        async editSuppliers() {
          await editSuppliers(this.formData, this.formData.id);
          this.$message.success("修改成功");
          this.dialogSuppliers.show = false;
          this.getSuppliersList();
        },
      },
    };
    </script>
    
    
    <style lang="scss" scoped>
    .suppliers {
    }
    </style>

后台：

接口：

import request from '@/utils/request'
    // 获取供货商列表
    export function getSuppliersList() {
        return request({
            url: `/api/inputManage/suppliers`,
            method: 'get'
        })
    }
    
    // 新增供货商 
    export function addSuppliers(data) {
        return request({
            url: `/api/inputManage/suppliers`,
            method: 'post',
            data
        })
    }
    //编辑供货商
    export function editSuppliers(data, id) {
        return request({
            url: `/api/inputManage/suppliers/${id}`,
            method: 'put',
            data
        })
    }
    // 删除供货商 
    export function deleteSuppliers(id) {
        return request({
            url: `/api/inputManage/suppliers/${id}`,
            method: 'delete'
        })
    }
    
    // 批量删除供货商 
    export function deleteMultiSuppliers(data) {
        return request({
            url: `/api/inputManage/suppliers`,
            method: 'delete',
            data
        })
    }
    // 模糊查询 供货商 记录
    export function fuzzyQuery(data) {
        return request({
            url: `/api/inputManage/suppliers/fuzzyQuery`,
            method: 'get',
            params: data
        })
    }

# 例2： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

![20210722164323772.png][]

<template>
      <div style="padding: 10px">
        <el-card>
          <el-button type="primary" icon="el-icon-plus" @click="handleAdd"
            >新增</el-button
          >
          <el-button @click="deleteMulti_tree()" type="danger" plain>
            <i class="el-icon-delete" /> 批量删除
          </el-button>
    
          <el-card style="margin-top: 20px">
            <div slot="header" class="clearfix">
              <span>树种列表</span>
              <el-button
                @click="getList_tree()"
                plain
                style="float: right; margin-left: 10px"
              >
                <i class="el-icon-refresh" /> 刷新
              </el-button>
            </div>
            <el-table
              ref="ref_table_tree"
              :data="tableData"
              stripe
              style="width: 100%"
              v-loading="loading"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column
                type="index"
                label="#"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="label"
                label="名称"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="value"
                label="标识"
                align="center"
              ></el-table-column>
              <el-table-column prop="date" label="更新日期" align="center" sortable>
                <template slot-scope="scope">
                  {
       { scope.row.date | formatDate }}
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="200">
                <template slot-scope="scope">
                  <el-button
                    type="warning"
                    @click.native.prevent="showEditDialog(scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    type="danger"
                    @click.native.prevent="handleDel(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-card>
        <DialogTree
          :dialog_tree="dialog_tree"
          :formData="formData"
          @add_tree="add_tree"
          @edit_tree="edit_tree"
        ></DialogTree>
      </div>
    </template>
     
    <script>
    import {
      getList_tree,
      add_tree,
      edit_tree,
      delete_tree,
      deleteMulti_tree,
    } from "@/api/tree.js";
    import DialogTree from "./dialogTree.vue";
    export default {
      name: "manage_tree",
      components: {
        DialogTree,
      },
      data() {
        return {
          tableData: [],
          loading: false,
          dialog_tree: {
            show: false,
            title: "",
          },
          formData: {},
    
          multipleSelection: [],
        };
      },
    
      mounted() {
        this.getList_tree();
      },
    
      methods: {
        //清除选择框
        clearSelect() {
          this.$refs["ref_table_tree"].clearSelection();
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        //批量删除用户
        async deleteMulti_tree() {
          if (this.multipleSelection.length == 0) {
            this.$message.warning("请选择要删除的记录");
            return;
          }
          this.$confirm("此操作将永久删除所选记录, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(async () => {
            let ids = [];
            this.multipleSelection.forEach((item) => {
              ids.push(item._id);
            });
            await deleteMulti_tree({ ids });
            this.$message.success("删除成功");
            this.getList_tree();
          });
        },
        // 新增按钮触发
        handleAdd() {
          this.dialog_tree = {
            show: true,
            title: "新增记录",
            option: "add",
          };
          this.formData = {
            label: "",
            value: "",
          };
        },
        // 获取树种列表
        async getList_tree() {
          this.loading = true;
          let { data } = await getList_tree();
    
          this.tableData = data;
          this.loading = false;
        },
        //新增树种
        async add_tree() {
          await add_tree(this.formData);
          this.$message.success("新建成功！");
          this.dialog_tree.show = false;
          this.getList_tree();
        },
        //删除树种
        handleDel(row) {
          this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(async () => {
            await delete_tree(row._id);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getList_tree();
          });
        },
        //打开编辑树种窗口
        showEditDialog(row) {
          this.dialog_tree = {
            show: true,
            title: "编辑记录",
            option: "edit",
          };
          this.formData = {
            id: row._id,
            label: row.label,
            value: row.value,
          };
        },
        //更新树种
        async edit_tree() {
          await edit_tree(this.formData, this.formData.id);
          this.$message.success("修改成功");
          this.dialog_tree.show = false;
          this.getList_tree();
        },
      },
    };
    </script>
     
     
    <style lang="scss" scoped>
    </style>

![20210722164352592.png][]：

<template>
      <div>
        <el-dialog
          :title="dialog_tree.title"
          :visible.sync="dialog_tree.show"
          width="30%"
          destroy-on-close
          :modal-append-to-body="false"
        >
          <el-form
            ref="ref_form_tree"
            :model="formData"
            :rules="rules"
            label-width="80px"
          >
            <el-form-item label="树种名称" prop="label">
              <el-input
                v-model="formData.label"
                placeholder="树种名称"
                style="width: 90%"
              />
            </el-form-item>
            <el-form-item label="树种标识" prop="value">
              <el-input
                v-model="formData.value"
                placeholder="树种标识"
                :disabled="dialog_tree.option == 'edit'"
                style="width: 90%"
              />
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialog_tree.show = false">取 消</el-button>
            <el-button
              type="primary"
              v-if="dialog_tree.option == 'add'"
              @click="add_tree('ref_form_tree')"
              >确 定</el-button
            >
            <el-button
              type="primary"
              v-if="dialog_tree.option == 'edit'"
              @click="edit_tree('ref_form_tree')"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
    </template>
    
    <script>
    export default {
      props: ["dialog_tree", "formData"],
      data() {
        return {
          rules: {
            label: [{ required: true, message: "请输入树种名称", trigger: "blur" }],
            value: [{ required: true, message: "请输入树种标识", trigger: "blur" }],
          },
        };
      },
      methods: {
        add_tree(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.$emit("add_tree");
            } else {
              console.log("提交出错!!");
              return false;
            }
          });
        },
        edit_tree(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.$emit("edit_tree");
            } else {
              console.log("提交失败!!");
              return false;
            }
          });
        },
      },
    };
    </script>
    
    <style lang="sass" scoped>
    </style>

@/api/tree.js:

import request from '@/utils/request'
    // 获取树种列表
    export function getList_tree() {
        return request({
            url: `/api/tree`,
            method: 'get'
        })
    }
    
    // 新增树种 
    export function add_tree(data) {
        return request({
            url: `/api/tree`,
            method: 'post',
            data
        })
    }
    //编辑树种
    export function edit_tree(data, id) {
        return request({
            url: `/api/tree/${id}`,
            method: 'put',
            data
        })
    }
    // 删除树种 
    export function delete_tree(id) {
        return request({
            url: `/api/tree/${id}`,
            method: 'delete'
        })
    }
    // 批量删除树种
    export function deleteMulti_tree(data) {
        return request({
            url: `/api/tree`,
            method: 'delete',
            data
        })
    }

后端：/models/Tree.js:

const mongoose = require("../db");
    
    const Schema = mongoose.Schema;
    //树种的接口模型
    const treeSchema = new Schema({
        //果树名称
        label: {
            type: String,
            required: true
        },
        //果树名称标识
        value: {
            type: String,
            required: true
        },
        date: {
            type: Date,
            default: Date.now
        }
    })
    
    module.exports = mongoose.model("Tree", treeSchema,
        "tb_trees")

/routes/tree.js:

记得在app.js中引入路由

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20221004/b080bfd90fd44d87bf737185cba1594f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20221004/cf3aa5eca87444ce957dd9e53e5f870e.png
[20210722164323772.png]: /images/20221004/80f926605234421ebd64dcd29d355f11.png
[20210722164352592.png]: /images/20221004/f45028bc71de44559b0c3bdbf04c7d15.png