✨ Introducing new features. 代码生成支持 element 原生

2026-11-14 06:09:03 +08:00 · 2020-01-30 12:39:17 +08:00
1 parent 7a815e6d4c
commit 2a839a56f0
@@ -0,0 +1,86 @@
+<template>
+  <el-dialog
+    :title="!dataForm.id ? '新增' : '修改'"
+    :close-on-click-modal="false"
+    :visible.sync="visible">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+#foreach($column in $columns)
+#if($column.columnName != $pk.columnName)
+    <el-form-item label="${column.comments}" prop="${column.lowerAttrName}">
+      <el-input v-model="dataForm.${column.lowerAttrName}" placeholder="${column.comments}"></el-input>
+    </el-form-item>
+#end
+#end
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+    import {getObj, addObj, putObj} from '@/api/${pathName}'
+
+    export default {
+    data () {
+      return {
+        visible: false,
+        dataForm: {
+#foreach($column in $columns)
+#if($column.columnName == $pk.columnName)
+          ${column.lowerAttrName}: 0,
+#else
+          ${column.lowerAttrName}: ''#if($velocityCount != $columns.size()),#end
+
+#end
+#end
+        },
+        dataRule: {
+#foreach($column in $columns)
+#if($column.columnName != $pk.columnName)
+          ${column.lowerAttrName}: [
+            { required: true, message: '${column.comments}不能为空', trigger: 'blur' }
+          ]#if($velocityCount != $columns.size()),#end
+
+#end
+#end
+        }
+      }
+    },
+    methods: {
+      init (id) {
+        this.dataForm.${pk.lowerAttrName} = id || 0
+        this.visible = true
+        this.$nextTick(() => {
+          this.$refs['dataForm'].resetFields()
+          if (this.dataForm.${pk.lowerAttrName}) {
+            getObj(this.dataForm.${pk.lowerAttrName}).then(response => {
+                this.dataForm = response.data.data
+            })
+          }
+        })
+      },
+      // 表单提交
+      dataFormSubmit () {
+        #[[this.$refs['dataForm'].validate((valid) => {]]#
+          if (valid) {
+            if (this.dataForm.${pk.lowerAttrName}) {
+                putObj(this.dataForm).then(data => {
+                    this.$message.success('修改成功')
+                    this.visible = false
+                    this.$emit('refreshDataList')
+                });
+            } else {
+                addObj(this.dataForm).then(data => {
+                    this.$message.success('添加成功')
+                    this.visible = false
+                    this.$emit('refreshDataList')
+                })
+            }
+          }
+        })
+      }
+    }
+  }
+</script>
@@ -0,0 +1,126 @@
+<template>
+  <div class="mod-config">
+    <basic-container>
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item>
+          <el-button v-if="permissions.${moduleName}_${pathName}_add" icon="el-icon-plus" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+        </el-form-item>
+      </el-form>
+
+      <div class="avue-crud">
+        <el-table
+                :data="dataList"
+                border
+                v-loading="dataListLoading">
+          #foreach($column in $columns)
+            <el-table-column
+                    prop="${column.lowerAttrName}"
+                    header-align="center"
+                    align="center"
+                    label="${column.comments}">
+            </el-table-column>
+          #end
+          <el-table-column
+                  header-align="center"
+                  align="center"
+                  label="操作">
+            <template slot-scope="scope">
+              <el-button v-if="permissions.${moduleName}_${pathName}_edit" type="text" size="small" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row.${pk.lowerAttrName})">修改</el-button>
+              <el-button v-if="permissions.${moduleName}_${pathName}_del" type="text" size="small" icon="el-icon-delete" @click="deleteHandle(scope.row.${pk.lowerAttrName})">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <div class="avue-crud__pagination">
+        <el-pagination
+                @size-change="sizeChangeHandle"
+                @current-change="currentChangeHandle"
+                :current-page="pageIndex"
+                :page-sizes="[10, 20, 50, 100]"
+                :page-size="pageSize"
+                :total="totalPage"
+                background
+                layout="total, sizes, prev, pager, next, jumper">
+        </el-pagination>
+      </div>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    </basic-container>
+  </div>
+</template>
+
+<script>
+  import {fetchList, delObj} from '@/api/${pathName}'
+  import AddOrUpdate from './${pathName}-add-or-update'
+  import {mapGetters} from 'vuex'
+  export default {
+    data () {
+      return {
+        dataForm: {
+          key: ''
+        },
+        dataList: [],
+        pageIndex: 1,
+        pageSize: 10,
+        totalPage: 0,
+        dataListLoading: false,
+        addOrUpdateVisible: false
+      }
+    },
+    components: {
+      AddOrUpdate
+    },
+    created () {
+      this.getDataList()
+    },
+    computed: {
+      ...mapGetters(['permissions'])
+    },
+    methods: {
+      // 获取数据列表
+      getDataList () {
+        this.dataListLoading = true
+        fetchList(Object.assign({
+          current: this.pageIndex,
+          size: this.pageSize
+        })).then(response => {
+          this.dataList = response.data.data.records
+          this.totalPage = response.data.data.total
+        })
+        this.dataListLoading = false
+      },
+      // 每页数
+      sizeChangeHandle (val) {
+        this.pageSize = val
+        this.pageIndex = 1
+        this.getDataList()
+      },
+      // 当前页
+      currentChangeHandle (val) {
+        this.pageIndex = val
+        this.getDataList()
+      },
+      // 新增 / 修改
+      addOrUpdateHandle (id) {
+        this.addOrUpdateVisible = true
+        #[[this.$nextTick(() => {]]#
+          this.$refs.addOrUpdate.init(id)
+        })
+      },
+      // 删除
+      deleteHandle (id) {
+        this.$confirm('是否确认删除ID为' + id, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(function () {
+          return delObj(id)
+        }).then(data => {
+          this.$message.success('删除成功')
+          this.getDataList()
+        })
+      }
+    }
+  }
+</script>