Vue 单表 CRUD模板前端

结合后端CRUD模板食用更佳
后端CRUD模板

js文件指向了后端的方法

页面基本模板

html 复制代码

import request from '@/utils/request'
// 查询关键词列表
export function page(param) {
  return request({
    url: '/systemConfig/page',
    method: 'post',
    params: param
  })
}

// 新增
export function add(param) {
  return request({
    url: '/systemConfig/add',
    method: 'post',
    data: param,
    headers: {
      'Content-Type': 'application/json'
    }
  })
}

// 编辑
export function update(param) {
  return request({
    url: '/systemConfig/update',
    method: 'post',
    data: param,
    headers: {
      'Content-Type': 'application/json'
    }
  })
}

// 删除
export function deleteData(id) {
  return request({
    url: '/systemConfig/delete?id=' + id,
    method: 'get'
  })
}

// 导出
export function exportData(param) {
  return request({
    url: '/systemConfig/export',
    method: 'post',
    data: param,
    headers: {
      'Content-Type': 'application/json'
    },
    responseType: 'blob'
  })
}

//导入
export function importData(formData) {
  return request({
    url: '/systemConfig/import',
    method: 'post',
    data: formData,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
}

html 复制代码

<template>
  <div class="app-container">
  </div>
 </template>
<script>

//这些是等会引用的js文件中的方法
import { page, add, update, deleteData,exportData,importData } from '@/api/systemConfig'

export default {
  data() {
    return {
      param: {
        pageIndex: 1,
        pageSize: 10,
        total: 0
      },
      isQuery: false,
      stores: [],
      tableData: [],
      needShowImg: false,
      showImgUrl: '',
      pickerOptions: {
        disabledDate(time) {
          const today = new Date()
          today.setHours(0, 0, 0, 0)
          return time.getTime() > today.getTime()
        }
      },
      addView: false,
      updateView: false,
      systemConfigDto: {
        id: '',
        configName: '',
        configCName: '',
        configValue: '',
        remark: ''
      },
      uploadFileList:[]
    }
  },
  created() {
    this.doQuery()
  },
  methods: {
    doQuery(pageIndex, pageSize) {
    },
    doPageChange(pageIndex) {
      this.doQuery(pageIndex, this.param.pageSize)
    },
    doPageSizeChange(size) {
      this.param.pageSize = size
      this.doQuery(1, this.param.pageSize)
    },
    showImg(url) {
      this.needShowImg = true
      this.showImgUrl = url
    }

  }
}
</script>

功能1:分页:

html页面代码:

html 复制代码

 <div>
      <div>
        <span>配置属性:</span>
        <el-input v-model="param.configName" placeholder="" clearable style="width:15%" />
        <span>配置中文名:</span>
        <el-input v-model="param.configCName" placeholder="" clearable style="width:15%" />
        <span>配置属性值:</span>
        <el-input v-model="param.configValue" placeholder="" clearable style="width:15%" />
        <el-button type="primary" :loading="isQuery" @click="doQuery(0)">查询</el-button>
      </div>
      <div style="margin-left: 2rem;margin-top: 6px">
        <el-button type="warning" style="margin-left: 2%" @click="openAddView()">新增</el-button>
        <el-button type="primary" :loading="downloading" @click="doExport()">导出</el-button>
        <el-upload
            style="display: inline-block;margin: 0 10px 0 10px"
            action="#"
            accept="xlsx"
            :auto-upload="false"
            :show-file-list="false"
            :file-list="uploadFileList"
            :on-change="importExcel"
          >
            <el-button :loading="uploading" type="success">导入</el-button>
          </el-upload>  
      </div>
    </div>
    <div>
      <el-table ref="multipleTable" :data="tableData" style="width: 100%;margin-top: 6px" border>
        <el-table-column label="操作" width="160px">
          <template v-slot="scope">
            <el-button type="primary" size="mini" @click="OpenUpdateView(scope.row)">编辑</el-button>
            <el-button type="warning" size="mini" @click="beginDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column label="配置属性" prop="configName" width="240px" />
        <el-table-column label="配置中文名" prop="configCName" width="240px" />
        <el-table-column label="配置属性值" prop="configValue" width="800px" />
        <el-table-column label="备注" prop="remark" width="200px" />
      </el-table>
    </div>
    <el-pagination style="margin-top: 12px;text-align: center" :current-page="param.pageIndex" :total="param.total" background :page-size="param.pageSize" :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next" @current-change="doPageChange" @size-change="doPageSizeChange" />

method方法:

html 复制代码

 doQuery(pageIndex, pageSize) {
      if (this.isQuery) {
        return
      }
      this.isQuery = true
      var _this = this
      this.param.pageIndex = pageIndex || 1
      this.param.pageSize = pageSize || 10
      var param = this.param
      //调用引入的page分页方法
      page(param).then(response => {
        _this.tableData = response.data.list
        _this.param.total = response.data.totalCount
        _this.isQuery = false
      })
    },
    doPageChange(pageIndex) {
      this.doQuery(pageIndex, this.param.pageSize)
    },
    doPageSizeChange(size) {
      this.param.pageSize = size
      this.doQuery(1, this.param.pageSize)
    },

功能2:打开弹窗,编辑/新增

只有method代码。html代码已经在上面了。

html 复制代码

//打开弹窗:
openAddView() {
      this.systemConfigDto.id = ''
      this.systemConfigDto.configName = ''
      this.systemConfigDto.configCName = ''
      this.systemConfigDto.configValue = ''
      this.systemConfigDto.remark = ''
      this.addView = true
    },
 OpenUpdateView(row) {
      this.systemConfigDto.id = row.id
      this.systemConfigDto.configName = row.configName
      this.systemConfigDto.configCName = row.configCName
      this.systemConfigDto.configValue = row.configValue
      this.systemConfigDto.remark = row.remark
      this.updateView = true
    }, 
 //往后端添加数据 
  beginAdd() {
      if (this.saveLoading) {
        return
      }
      this.saveLoading = true
      const param = {
        configName: this.systemConfigDto.configName,
        configCName: this.systemConfigDto.configCName,
        configValue: this.systemConfigDto.configValue,
        remark: this.systemConfigDto.remark
      }
      const _this = this
      add(param).then(response => {
        _this.saveLoading = false
        _this.$message.success('新增成功')
        _this.addView = false
        _this.doQuery()
      }).catch(error => {
        console.log(error)
        _this.saveLoading = false
      })
    },
     beginUpdate() {
      if (this.saveLoading) {
        return
      }
      this.saveLoading = true
      const param = {
        id: this.systemConfigDto.id,
        configName: this.systemConfigDto.configName,
        configCName: this.systemConfigDto.configCName,
        configValue: this.systemConfigDto.configValue,
        remark: this.systemConfigDto.remark
      }
      const _this = this
      update(param).then(response => {
        _this.saveLoading = false
        _this.$message.success('编辑成功')
        _this.updateView = false
        _this.doQuery()
      }).catch(error => {
        console.log(error)
        _this.saveLoading = false
      })
    },

功能3:删除

只有method代码。html代码已经在上面了。

html 复制代码

    beginDelete(row) {
      const _this = this
      // 弹出确认对话框
      this.$confirm('确定删除配置属性:' + row.configName, '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户点击了确认，执行删除逻辑
        deleteData(row.id).then(response => {
          _this.saveLoading = false
          _this.$message.success('删除成功')
          _this.doQuery()
        }).catch(error => {
          console.log(error)
          _this.saveLoading = false
        })
      }).catch(() => {
        // 用户点击了取消，不做任何操作
        _this.$message.info('已取消删除操作')
      })
    }

功能4:导出

html 复制代码

 doExport() {
      const param = {
        page: this.searchParam.page,
        pageSize: this.searchParam.pageSize,
        title: this.searchParam.title,
        origin: this.searchParam.origin,
        subject: this.searchParam.subject
      }
      exportData (param).then(data => {
      })
    },

功能5:导入

html 复制代码

    importExcel(file, fileList) {
      const formData = new FormData()
      if (!file) {
        this.$message.error('请上传文件')
        return
      }
      formData.append('file', file.raw)
      const _this = this
      importData(formData).then(response => {
        _this.$message.success('导入成功')
        _this.search(1)
      }).catch(error => {
        console.log(error)
      })
    }

Vue 单表 CRUD模板 前端

功能1:分页:

功能2:打开弹窗,编辑/新增

功能3:删除

功能4:导出

功能5:导入

Vue 单表 CRUD模板前端