编写前台数据展示页

1.在src/views目录下创建一个目录，目录名称为系统名称todo，该目录下面以后就存放该系统的页面文件

2.在src/views/todo目录下创建 todo-add-or-update.vue 文件，并将 src/views/basic/examples/template/ 中对应的文件内容复制进来即可

  1. <template>
  2.     <div>
  3.         <!--这是表单-->
  4.         <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
  5.             <el-form-item>
  6.                 <el-input v-model="dataForm.searchKey" placeholder="请输入查询条件" clearable :autofocus="true">
  7.                     <el-button slot="append" icon="el-icon-search" @click="getDataList()"></el-button>
  8.                 </el-input>
  9.             </el-form-item>
  10.             <el-form-item>
  11.                 <el-button type="primary" @click="addOrUpdateHandle()" icon="el-icon-plus" v-if="isAuth('todo:save')">
  12.                     新增
  13.                 </el-button>
  14.                 <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0"
  15.                            icon="el-icon-delete">批量删除
  16.                 </el-button>
  17.             </el-form-item>
  18.         </el-form>
  20.         <!--这是表格-->
  21.         <el-table
  22.                 :data="dataList"
  23.                 border
  24.                 v-loading="dataListLoading"
  25.                 @selection-change="selectionChangeHandle"
  26.                 style="width: 100%;">
  27.             <el-table-column
  28.                     type="selection"
  29.                     header-align="center"
  30.                     align="center"
  31.                     width="50">
  32.             </el-table-column>
  33.             <el-table-column
  34.                     prop="name"
  35.                     header-align="center"
  36.                     align="center"
  37.                     label="待办事项">
  38.             </el-table-column>
  39.             <el-table-column
  40.                     prop="status"
  41.                     header-align="center"
  42.                     align="center"
  43.                     label="状态">
  44.                 <template slot-scope="scope">
  45.                     <el-tag v-if="scope.row.status === 1" size="small">已完成</el-tag>
  46.                     <el-tag v-else size="small" type="danger">未完成</el-tag>
  47.                 </template>
  48.             </el-table-column>
  49.             <el-table-column
  50.                     fixed="right"
  51.                     header-align="center"
  52.                     align="center"
  53.                     width="150"
  54.                     label="操作">
  55.                 <template slot-scope="scope">
  56.                     <el-button type="text" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
  57.                     <el-button type="text" icon="el-icon-delete" @click="deleteHandle(scope.row.id)">删除</el-button>
  58.                 </template>
  59.             </el-table-column>
  60.         </el-table>
  62.         <!--这是分页-->
  63.         <el-pagination
  64.                 @size-change="sizeChangeHandle"
  65.                 @current-change="currentChangeHandle"
  66.                 :current-page="pageIndex"
  67.                 :page-sizes="[10, 20, 50, 100]"
  68.                 :page-size="pageSize"
  69.                 :total="totalPage"
  70.                 background
  71.                 layout="total, prev, pager, next">
  72.         </el-pagination>
  73.         <!-- 弹窗, 新增 / 修改 -->
  74.         <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  75.     </div>
  76. </template>
  78. <script>
  79.     import AddOrUpdate from './todo-add-or-update'
  80.     import {pageMixins} from '@/mixins/page'
  82.     export default {
  83.         data() {
  84.             return {
  85.                 dataForm: {
  86.                     searchKey: ''
  87.                 },
  88.                 dataList: [],
  89.                 dataListLoading: false,
  90.                 dataListSelections: [],
  91.                 addOrUpdateVisible: false
  92.             }
  93.         },
  94.         mixins: [pageMixins],
  95.         components: {
  96.             AddOrUpdate
  97.         },
  98.         activated() {
  99.             this.getDataList()
  100.         },
  101.         methods: {
  102.             // 获取数据列表
  103.             getDataList() {
  104.                 this.dataListLoading = true
  105.                 this.$get('/todo/list', {
  106.                     'page': this.pageIndex,
  107.                     'limit': this.pageSize,
  108.                     'searchKey': this.dataForm.searchKey
  109.                 }).then(data => {
  110.                     // 查询成功后，将获取的数据放入dataList中进行页面渲染
  111.                     this.dataListLoading = false
  112.                     this.dataList = data.list
  113.                     this.totalPage = data.totalCount
  114.                 })
  115.             },
  116.             // 多选触发、传入的是多选的数组对象
  117.             selectionChangeHandle(val) {
  118.                 this.dataListSelections = val
  119.             },
  120.             // 新增 / 修改
  121.             addOrUpdateHandle(id) {
  122.                 this.addOrUpdateVisible = true
  123.                 // 保证在下一次页面渲染完成后执行
  124.                 this.$nextTick(() => {
  125.                     this.$refs.addOrUpdate.init(id)
  126.                 })
  127.             },
  128.             // 删除
  129.             deleteHandle(id) {
  130.                 // 批量删除
  131.                 var ids = id ? [id] : this.dataListSelections.map(item => {
  132.                     return item.id
  133.                 })
  134.                 this.$confirm(`确定进行${id ? '删除' : '批量删除'}操作?`, '提示', {
  135.                     confirmButtonText: '确定',
  136.                     cancelButtonText: '取消',
  137.                     type: 'warning'
  138.                 }).then(() => {
  139.                     // 确定后调用接口进行批量删除
  140.                     this.$post('/todo/delete', ids).then(data => {
  141.                         this.$message.success('操作成功')
  142.                         // 删除成功后页面数据手动刷新
  143.                         this.getDataList()
  144.                     })
  145.                 }).catch(() => {
  146.                 })
  147.             }
  148.         }
  149.     }
  150. </script>

编写前台数据修改页

在src/views/todo目录下创建 todo-add-or-update.vue 文件，并将 src/views/basic/examples/template/ 中对应的文件内容复制进来即可

  1. <template>
  2.     <el-dialog
  3.             :title="!dataForm.id ? '新增待办': '修改待办'"
  4.             :close-on-click-modal="false"
  5.             :visible.sync="visible"
  6.             top="10vh"
  7.     >
  8.         <el-form
  9.                 :model="dataForm"
  10.                 :rules="dataRule"
  11.                 ref="dataForm"
  12.                 @keyup.enter.native="dataFormSubmit()"
  13.                 label-width="80px">
  14.             <el-form-item label="待办事项" prop="name">
  15.                 <el-input v-model="dataForm.name" placeholder="待办事项"></el-input>
  16.             </el-form-item>
  17.             <el-form-item label="状态" prop="status">
  18.                 <el-radio-group v-model="dataForm.status">
  19.                     <el-radio :label="1">已完成</el-radio>
  20.                     <el-radio :label="-1">未完成</el-radio>
  21.                 </el-radio-group>
  22.             </el-form-item>
  23.         </el-form>
  24.         <span slot="footer" class="dialog-footer">
  25.       <el-button @click="visible = false" icon="el-icon-close">取消</el-button>
  26.       <el-button type="primary" @click="dataFormSubmit()" icon="el-icon-check">确定</el-button>
  27.     </span>
  28.     </el-dialog>
  29. </template>
  31. <script>
  32.     export default {
  33.         data() {
  34.             return {
  35.                 visible: false,
  36.                 dataForm: {
  37.                     id: 0,
  38.                     name: '',
  39.                     status: 0
  40.                 },
  41.                 dataRule: {
  42.                     name: [{required: true, message: '待办事项不能为空', trigger: 'blur'}]
  43.                 }
  44.             }
  45.         },
  46.         methods: {
  47.             init(id) {
  48.                 this.dataForm.id = id || 0
  49.                 this.$get(`/todo/info/${this.dataForm.id}`).then(data => {
  50.                     this.visible = true
  51.                     this.dataForm.id = data.id
  52.                     this.dataForm.name = data.name
  53.                     this.dataForm.status = data.status
  54.                 })
  55.             },
  56.             // 表单提交
  57.             dataFormSubmit() {
  58.                 this.$refs['dataForm'].validate((valid) => {
  59.                     if (valid) { // 校验通过
  61.                         this.$post(`/todo/${!this.dataForm.id ? 'save' : 'update'}`, {
  62.                             'id': this.dataForm.id || undefined,
  63.                             'name': this.dataForm.name,
  64.                             'status': this.dataForm.status
  65.                         }).then(data => {
  66.                             this.visible = false
  67.                             // 让父组件刷新列表数据
  68.                             this.$emit('refreshDataList')
  69.                             this.$message.success('操作成功')
  70.                         })
  71.                     }
  72.                 })
  73.             }
  74.         }
  75.     }
  76. </script>