使用mixins混入，封装一键实现前端的增删改查

1.我们将弹窗封装成组件，在弹窗组件中实现新增和修改和查看详情

2.在数据展示页面实现，渲染列表和删除导入等。

1.checkAndDEL.js

mixins代码：在views/components/mixin，新建checkAndDEL.js

import {mapGetters} from "vuex";

export const checkAndDEL = {
    data() {
        return {
            formFilter: {
            },
            total: 0,
            pageNum: 1,
            pageSize: 10,
            tableList: [],
            selection: [],
        }
    },
    methods: {
        // 点击获取不同的标签页
        handleClick() {
            this.pageNum = 1
            this.pageSize = 10
            this.formFilter = {}
            this.inquireListNew()
        },


        /** 查询*/
        async inquireList() {
            var param = {
                ...this.formFilter,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            }
            const res = await this.ListApi(param)
            if (res.data.code === 1) {
                this.tableList = res.data.data.items
                this.total = res.data.data.total
            } else {
                this.tableList = []
                this.total = 0
                this.$messageJs(false, res.data.message)
            }
        },


        /** 新增按钮操作 */
        async handleAdd(row) {
            this.$refs.addDialogRef.handleAdd()
        },

        /** 修改按钮操作 */
        handleUpdate(row) {
            this.$refs.addDialogRef.handleUpdate(row)
        },

        /** 查看详情按钮 */
        handleDetail(row) {
            this.$refs.addDialogRef.handleDetail(row)
        },

        /** 批量删除 */
        batchDel(ids) {
            if (this.selection.length === 0) {
                this.$messageJs(false, '请选择要删除的项')
            } else {
                this.$confirm('此操作将批量删除用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const arr = []
                    this.selection.forEach(item => {
                        arr.push(item[ids])
                    })
                    //调用接口
                    const res = await this.DeleteApi(arr)
                    if (res.data.code === 1) {
                        //重新渲染表格
                        await this.inquireList()
                        this.$messageJs(true, '删除成功')
                    }else {
                        this.$messageJs(false, res.data.message)
                    }
                }).catch(() => {
                    this.$messageJs(false, '已取消删除')
                })
            }
        },

        /** 批量选中 */
        handleSelectionChange(val) {
            this.selection = val;
        },

        /** 删除单条信息 */
        async handleDelete(id) {
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await this.DeleteApi([id])
                if (res.data.code === 1) {
                    //重新渲染表格
                    await this.inquireList()
                    this.skipPrevPage()
                    this.$messageJs(true, '删除成功')
                } else {
                    this.$messageJs(false, res.data.message)
                }
            }).catch(() => {
                this.$messageJs(false, '已取消删除')
            })
        },

        // 导入
        async handleImport(file) {
            var fileData = new FormData()
            fileData.append('file', file.raw)
            var loading = this.$loading({
                lock: true,
                text: '数据导入中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            const res = await this.ImportApi(fileData)
            if (res.data.code === 1) {
                this.$messageJs(true, '导入成功')
                this.inquireList()
            } else {
                this.$message({
                    dangerouslyUseHTMLString: true,
                    message: res.data.message,
                    type: 'error'
                });
                // this.$messageJs(false, res.data.message)
            }
            loading.close()
        },

        // 跳转到上一页
        skipPrevPage() {
            if (this.total % this.pageSize === 0 && this.pageNum > 0) {
                this.inquireList()
            }
        },
    }
}

引入使用

import addDialog from "@/views/info/components/addDialog";
import {personListApi, personDeleteApi, personImportApi} from '@/api/info'
import {checkAndDEL} from '@/views/components/mixin/checkAndDEL'
export default {
  name: "info",
  components: {
    addDialog
  },
  mixins: [checkAndDEL],
  created() {
    this.inquireList()
  },
  data() {
    return {
      ListApi: personListApi,
      DeleteApi: personDeleteApi,
      ImportApi: personImportApi,
      tableLabel: [
        {label: '单位', prop: 'unitName'},
         //...
      ]
    }
  },
  methods: {}
}

2.addAndEditor .js

mixin代码，新增修改查看详情，在views/components/mixin，新建addAndEditor .js

export const addAndEditor = {
    data() {
        return {
            open: false,
            title: '',
            disable: false,
        }
    },
    methods: {
        /** 新增*/
        async handleAdd(row) {
            this.reset()
            this.disable = false
            this.title = "新增";
            this.open = true;
        },

        /** 修改*/
        handleUpdate(row) {
            this.reset()
            this.Detail(row)
            this.disable = false
            this.title = "修改";
        },

        /** 查看详情*/
        handleDetail(row) {
            this.reset()
            this.Detail(row)
            this.disable = true
            this.title = "查看详情"
        },

        /** 点击x号取消*/
        onDialogClosed() {
            this.open = false
            //清空初始值
            this.$refs.addInfoFormRef.resetFields()
            //输入框置空
            this.reset()
        },
    },

}

引入使用

<script>
import { personAddApi, personUpdateApi, personDetailApi, getIdentityInfoApi } from '@/api/info'
import {addAndEditor} from "@/views/components/mixin/addAndEditor"
export default {
  name: "infoAddDialog",
  mixins: [addAndEditor],
  props: {
    inquireList: {
      type: Function
    }
  },
  data() {
    return {
      form: {},
      rules: {},
      fromLabel: [
        {type: 1, prop: 'name', label: '姓名（input类）}'},
        {type: 2, prop: 'name1', label: '日期类'},
        {type: 3, prop: 'name1', label: '时间范围类'},
        {type: 4, prop: 'name1', label: '选择select类'},
    }
  },
  methods: {
    /** 数据提交*/
    async submitForm() {
      this.$refs.addInfoFormRef.validate(async (vaild) => {
        if (vaild) {
          if (this.title === '修改') {
            const res = await personUpdateApi(this.form)
            if (res.data.code === 1) {
              this.$messageJs(true, "修改成功");
              await this.inquireList();
            } else {
              this.$messageJs(false, res.data.message);
            }
          } else if(this.title === '新增') {
            const res = await personAddApi(this.form)
            if (res.data.code === 1) {
              this.$messageJs(true, "新增成功");
              await this.inquireList();
            } else {
              this.$messageJs(false, res.data.message);
            }
          }
          this.open = false;
          this.reset();
        }
        else {
          this.$messageJs(false,'请填写完整信息')
        }
      })
    },

    async Detail(row) {
      const res = await personDetailApi(row.identityCard)
      if (res.data.code === 1) {
        this.form = res.data.data
      } else {
        this.$messageJs(false, res.data.message);
      }
      this.open = true;
    },

    /** 重置*/
    reset() {
      this.form = {}
      this.resetForm("form");
    }
  }
}
</script>

3.弹窗组件模板

<template>
  <!-- 添加或修改参数配置对话框 -->
  <el-dialog :title="title" :visible.sync="open" @close="onDialogClosed" width="1400px" append-to-body :class="{'elDialog':disable === true}">
    <div class="dialog-title">基础信息</div>
    <el-form :disabled="disable" ref="addInfoFormRef" :inline="true" :model="form" 
      class="demo-form-inline" size="small":label-position="'right'" :rules="rules" 
      label-width="100px">
       <el-form-item :prop="item.prop" v-for="item in fromLabel" :key="item.prop">
        <label slot="label" v-html="item.label"></label>
        <el-input  v-if="item.type === 1" clearable v-model="form[item.prop]" 
          :placeholder="'请输入'+item.label"> 
        </el-input>
        <el-date-picker
              clearable
              v-if="item.type === 2"
              v-model="form[item.prop]"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd">
          </el-date-picker>
          <el-date-picker
              clearable
              v-model="form[item.prop]"
              v-if="item.type === 3"
              value-format="yyyy-MM-dd"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @blur="changePackageTime">
          </el-date-picker>
           <el-select filterable clearable v-if="item.type === 4"
                   v-model="form[item.prop]"
                   :placeholder="'请输入'+item.label"
                   @visible-change="getInfor(item.code)">
          <el-option
              v-for="item in options[item.code]"
              :key="item.dictCode"
              :label="item.dictLabel"
              :value="item.dictLabel">
          </el-option>
        </el-select>
      </el-form-item>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="onDialogClosed">取 消</el-button>
      <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

引用弹窗

<addDialog :inquireList="inquireListNew" ref="addDialogRef"></addDialog>