封装table列表 (增,删,改,查,分,详)

希望可以帮助大家提高工作效率

js文件

/*
 * @Author       : qixiao
 * @Date         : 2023-04-28 16:51:21
 * @LastEditors  : qixiao
 * @LastEditTime : 2023-05-06 15:15:36
 * @FilePath     : \nxml-web\src\mixins\formPage.js
 * @Description  : list列表页增删改查分
 * 
 */

/**
 * @description: 封装说明
 * @param {*getTableData()*} | 调用查询接口方法必须为 
 * @param {*{rows:[{xxx:xxx}],total:999}*} | 查询接口返回数据结构为 
 * @param {*pageSize:x , pageNum:x*} | 调用查询接口分页传参为 
 * @param {*showAddFormModal()*} |  新增数据  打开模态框为 
 * @param {*afterShowModalHandle()*} |  打开模态框之后的调用为 
 * @param {*closeFormConfigModel()*} |  新增模态框关闭
 * @param {*afterShowAddModalHandle()*} |  数据结构转换 , 将添加的form表单转换为 后端规定的格式 
 * @param {*addFormData(url,params)*} |   提交添加表单 url = 接口地址 , params = 传参
 * @param {*updateFormData(url,params)*} |   提交修改表单 url = 接口地址 , params = 传参
 * @param {*showEditFormModal(row,title,boolean)*} |  打开编辑模态框/跳转编辑功能 row = 行内数据 title="模态框title" boolean = 是否在外部页面编辑
 */

export const formPage = {
    data() {
        return {
            /** 网关跨域代理 */
            Proxys: process.env.VUE_APP_BASE_API,
            /* 当前用户信息 */
            userInfo: {},
            /* 当前页面权限 */
            pagePermission: {
                /* 是否在外部页面进行编辑,修改,详情  为true否则false */
                WhetherinteriorPage: false,
            },
            pageTitle: '',
            //新增表单
            // 表单弹框
            formConfigModel: {
                show: false,
                title: '',
                loading: false,
                isEdit: false,
            },

            /***table数据 */

            pageDataConfigModel: {
                pageNum: 1,
                pageSize: 10,
                loading: false,
                data: [],
                recordTotal: 0,
                pageSizeList: [10, 20, 30, 40]
            },

            /* 详情宿主 */

            pageDetailModel: {
                show: false,
                data: {}
            },

            /* 需要编辑的参数 */

            checkOneData: {},

        }

    },

    created() {
        this.refreshData()
    },

    methods: {

        /** 显示添加表单模态框 */

        showAddFormModal(title) {
            this.pageTitle = title
            this.formConfigModel.title = "新增" + this.pageTitle;
            this.formConfigModel.show = true;
            this.formConfigModel.loading = false;
            this.formConfigModel.isEdit = false;

            this.afterShowAddModalHandle();
        },

        /** 显示修改表单模态框 */

        showEditFormModal(row, title, inline) {
            this.pageTitle = title
            this.formConfigModel.title = "修改" + this.pageTitle;
            let fn = inline ? this.UpdateJumpFn(row) : this.UpdateModalBoxFn(row)
        },

        /* 修改功能(模态框场景) */

        UpdateModalBoxFn(row) {
            this.formConfigModel.show = true;
            this.formConfigModel.loading = false;
            this.formConfigModel.isEdit = true;
            this.afterShowEditModalHandle(row);
            this.afterShowModalHandle()
        },

        /* 修改功能(跳转页面场景) */

        UpdateJumpFn(row) {
            this.pagePermission.WhetherinteriorPage = true
            this.afterShowEditModalHandle(row);
            this.afterShowModalHandle()
        },


        /** 显示模态框之后操作 (备用函数,或者可以加多条件判断执行,可重载)*/

        afterShowModalHandle() { },

        /** 关闭表单配置模态框 */

        closeFormConfigModel() {
            /* :model ref="" prop 三者必须要有否则不生效 */
            this.$refs.CreatFormRef.resetFields();
            this.formConfigModel.show = false;
        },

        /** 添加表单数据 */

        addFormData(url, form) {
            return new Promise((resolve, reject) => {
                this.formConfigModel.loading = true;
                /* 添加时去除id */
                form.id = form.id ? '' : ''
                this.$http.post(this.Proxys + url, form)
                    .then((res) => {
                        console.log(res);
                        if (res.data.code == 200) {
                            this.formConfigModel.show = false;
                            this._showSuccessMessage(res.data.msg)
                        } else {
                            this._showErrorMessage(res.data.msg)
                        }
                        this.$refs.CreatFormRef.resetFields();
                        resolve(res);
                        this.refreshData()
                        this.formConfigModel.loading = false;
                        return;
                    })

                    .catch((err) => {
                        this.formConfigModel.loading = false;
                        reject(err);
                        return;
                    });
            });

        },

        //修改表单数据

        updateFormData(url, form) {
            return new Promise((resolve, reject) => {
                this.formConfigModel.loading = true;
                /* 备用函数,数据结构转换 */
                this.afterShowUpdateModalHandle()
                this.$http
                    .post(this.Proxys + url, form)
                    .then((res) => {
                        if (res.data.code == 200) {
                            this.formConfigModel.show = false;
                            this._showSuccessMessage(res.data.msg)
                        } else {
                            this._showErrorMessage(res.data.msg)
                        }
                        console.log(res)
                        resolve(res);
                        this.refreshData()
                        this.formConfigModel.loading = false;
                        return;
                    })
                    .catch((err) => {
                        this.formConfigModel.loading = false;
                        reject(err);
                        return;
                    });
            });
        },

        /** 删除表单数据 */

        deleteData(url) {
            this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                return new Promise((resolve, reject) => {
                    this.$http.get(this.Proxys + url)
                        .then((res) => {
                            resolve(res);
                            this.refreshData()
                            this._showSuccessMessage('删除成功!')
                            return;
                        })
                        .catch((err) => {
                            reject(err);
                            return;
                        });
                });
            }).catch(() => {
                this._showInfoMessage('已取消删除!')
            });
        },

        /* 点击详情按钮 */

        showDetailFormModal(url, rowId) {
            return new Promise((resolve, reject) => {
                this.$http.get(this.Proxys + url)
                    .then((res) => {
                        let { data } = res.data
                        this.pageDetailModel.show = true
                        this.pageDetailModel.data = data
                        resolve(res);
                        return;
                    })
                    .catch((err) => {
                        reject(err);
                        return;
                    });
            });
        },

        /* 详情模态框关闭 */

        closeTheModalBox(done) {
            done()
        },

        //获取数据信息

        refreshData() {
            this.pageDataConfigModel.pageNum = 1;
            this.getTableData();
        },

        changePageSize(newSize) {
            console.log('newSize', newSize);
            this.pageDataConfigModel.pageSize = newSize;
            this.getTableData();
        },

        changePageIndex(newIndex) {
            console.log('newIndex', newIndex);
            this.pageDataConfigModel.pageNum = newIndex;
            this.getTableData();
        },

        /** 重置搜索条件获取数据 */

        researchForm(searchForm) {
            // :model ref="" prop 三者必须要有否则不生效
            this.$refs[searchForm].resetFields();
            this.refreshData();
        },

        /** 查询页面数据处理 */

        searchPageDataHandle(data) {
            let arr = data.rows || []
            this.pageDataConfigModel.data = arr
            this.pageDataConfigModel.recordTotal = data.total
        },

        /* 成功提示 */
        _showSuccessMessage(message) {
            this.$message({
                message: message,
                type: "success"
            });
        },

        /* 失败提示 */
        _showErrorMessage(message) {
            this.$message({
                message: message,
                type: "error"
            });
        },

        /*警告提示  */
        _showWarningMessage(message) {
            this.$message({
                message: message,
                type: "warning"
            });
        },

        /* 消息提示 */
        _showInfoMessage(message) {
            this.$message({
                message: message,
                type: "info"
            });
        },

    },



}

vue页面:

<!--
 * @Author       : qixiao
 * @Date         : 2023-04-18 10:10:21
 * @LastEditors  : qixiao
 * @LastEditTime : 2023-05-06 15:06:03
 * @FilePath     : \nxml-web\src\views\mlVisualization\test\index.vue
 * @Description  : 
 * 
-->

<template>
  <div class="page">
    <!-- 1.Search搜索 -->
    <el-form
      ref="searchForm"
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
    >
      <el-form-item prop="surveyName">
        <el-input
          v-model="formInline.surveyName"
          placeholder="服务组织名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="getTableData"
          >查询</el-button
        >
        <el-button
          icon="el-icon-refresh-right"
          type="primary"
          plain
          @click="researchForm('searchForm')"
          >重置</el-button
        >
        <el-button type="primary" @click="showAddFormModal('调查表')"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 2.table表格 -->
    <el-table
      v-loading="formConfigModel.loading"
      :data="pageDataConfigModel.data"
      style="width: 100%"
    >
      <el-table-column prop="createTime" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="surveyName" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="orgAddress" label="操作">
        <template slot-scope="{ row }">
          <span @click="deleteData(`/admin/survey/remove?id=${row.id}`)"
            >删除</span
          >

          <span @click="showEditFormModal(row, '调查表')">编辑</span>
          <span
            @click="
              showDetailFormModal(`/admin/survey/getBySurvey?id=${row.id}`)
            "
            >详情</span
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 3.分页 -->
    <div class="block">
      <el-pagination
        background
        layout="total,prev, pager, next,sizes"
        :page-size="pageDataConfigModel.pageSize"
        :page-sizes="pageDataConfigModel.pageSizeList"
        :total="pageDataConfigModel.recordTotal"
        :current-page.sync="pageDataConfigModel.pageNum"
        :hide-on-single-page="false"
        @current-change="changePageIndex"
        @size-change="changePageSize"
      >
      </el-pagination>
    </div>
    <!-- 4.添加或者修改(模态框) -->
    <el-dialog
      :title="formConfigModel.title"
      :visible.sync="formConfigModel.show"
      width="30%"
      :before-close="closeFormConfigModel"
    >
      <div>
        <el-form
          ref="CreatFormRef"
          :inline="true"
          :model="addACondition"
          class="demo-form-inline"
        >
          <el-form-item prop="surveyName" label="服务组织名称">
            <el-input
              v-model="addACondition.surveyName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeFormConfigModel">取 消</el-button>
        <!-- 添加按钮 -->
        <el-button
          v-if="!formConfigModel.isEdit"
          type="primary"
          @click="addFormData('/admin/survey/saveOrUp', addACondition)"
          >确 定</el-button
        >
        <!-- 修改按钮 -->
        <el-button
          v-else
          type="primary"
          @click="updateFormData('/admin/survey/saveOrUp', addACondition, true)"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 5.详情(模态框) -->
    <el-dialog
      title="详情"
      :visible.sync="pageDetailModel.show"
      width="30%"
      :before-close="closeTheModalBox"
    >
      <div>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item prop="surveyName" label="服务组织名称">
            <el-input
              v-model="pageDetailModel.data.surveyName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { formPage } from "@/mixins/formPage";
import {
  listSurvey,
  deleteSurvey,
  checkSurvey,
  enableSurvey,
} from "@/api/yieldWorkManage/survey";

export default {
  components: {},
  props: [],
  mixins: [formPage],
  data() {
    return {
      /* 查询条件 */
      formInline: {
        surveyName: "",
      },
      /* 添加条件 */
      addACondition: {
        id: "", // 为编辑做铺垫,
        surveyName: "",
      },
    };
  },
  mounted() {
    console.log(this.formPage);
    console.log(this.formConfigModel);
  },
  created() {
    console.log(this.$data);
    console.log(this.methods);
  },
  methods: {
    /**
     * @description: 初始化申请接口数据
     * @return {*}
     */

    getTableData() {
      //调取列表接口
      listSurvey({ ...this.formInline, ...this.pageDataConfigModel }).then(
        (res) => {
          console.log(res);
          // 将接口调用的数据渲染到列表上
          this.searchPageDataHandle(res);
        }
      );
    },

    /**
     * @description: 数据结构转换 - 添加
     * @return {* 如果addACondition里面的数据结构 不是服务端希望接收到的 依靠此函数自定义转换 *}
     */
    afterShowAddModalHandle() {},

    /**
     * @description: 数据结构转换 - 编辑提交
     * @return {* 如果addACondition里面的数据结构 不是服务端希望接收到的 依靠此函数自定义转换 *}
     */
    afterShowUpdateModalHandle() {
      this.addACondition.prefaceId = this.addACondition.id;
    },

    /**
     * @description: 数据结构转换 - 编辑回显
     * @return {* 将当前列表行数据对addACondition进行赋值,进行回显 *}
     */
    afterShowEditModalHandle(row) {
      /* 拷贝row与addACondition相同的字段 */
      Object.keys(this.addACondition).forEach((key) => {
        this.addACondition[key] = row[key];
      });
    },

    /* 跳转编辑页面并携带参数 */

    afterShowModalHandle() {
        /* 是否为跳转编辑场景 */
      if (this.pagePermission.WhetherinteriorPage)
        this.$router.push({
          path: "/basicInformManage/agricultural/edit",
          query: { data: JSON.stringify(this.addACondition) },
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-result {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>