|
@@ -0,0 +1,219 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-form :inline="true" :model="param" class="demo-form-inline">
|
|
|
+ {% for table in table_objs -%}
|
|
|
+ {% if table['search'] == True -%}
|
|
|
+ <el-form-item label="{{ table['label'] }}">
|
|
|
+ <el-input v-model="param.{{ table['prop'] }}" placeholder="{{ table['label'] }}"/>
|
|
|
+ </el-form-item>
|
|
|
+ {% endif -%}
|
|
|
+ {% endfor -%}
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="queryList">查询</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template>
|
|
|
+ <!--添加-->
|
|
|
+ <el-row>
|
|
|
+ <el-button @click="createOne()">添加</el-button>
|
|
|
+ </el-row>
|
|
|
+ <!--数据-->
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ {% for table in table_objs -%}
|
|
|
+ <el-table-column
|
|
|
+ prop="{{ table['prop'] }}"
|
|
|
+ label="{{ table['label'] }}"
|
|
|
+ width="{{ table['width'] }}"
|
|
|
+ />
|
|
|
+ {% endfor -%}
|
|
|
+ <el-table-column
|
|
|
+ fixed="right"
|
|
|
+ label="操作"
|
|
|
+ width="100"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ @click="editOne(scope.row)"
|
|
|
+ >编辑
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="text"
|
|
|
+ @click="deleteAlert(scope.row.id)"
|
|
|
+ >删除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!--编辑层-->
|
|
|
+ <el-dialog title="编辑" :visible.sync="dialogFormVisible">
|
|
|
+ <el-form :model="editNews">
|
|
|
+ {% for table in table_objs -%}
|
|
|
+ {% if table['edit'] == True -%}
|
|
|
+ <el-form-item label="{{ table['label'] }}" :label-width="formLabelWidth">
|
|
|
+ <el-input v-model="editNews.{{ table['prop'] }}" placeholder="{{ table['label'] }}"/>
|
|
|
+ </el-form-item>
|
|
|
+ {% endif -%}
|
|
|
+ {% endfor -%}
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogFormVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="saveOne">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!--删除提示-->
|
|
|
+ <el-dialog
|
|
|
+ title="提示"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="30%"
|
|
|
+ :before-close="handleClose"
|
|
|
+ >
|
|
|
+ <span>真的要删吗?</span>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="deleteOne">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!--分页-->
|
|
|
+ <div class="block">
|
|
|
+ <el-pagination
|
|
|
+ :current-page="param.page"
|
|
|
+ :page-sizes="[10, 20, 30, 40]"
|
|
|
+ :page-size="param.size"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="total"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {deleteOne, fetchList, fetchOne, saveOne} from '@/api/{{ table_name }}'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "{{ table_name.capitalize() }}",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: [],
|
|
|
+ // 删除层隐藏
|
|
|
+ dialogVisible: false,
|
|
|
+ // 弹出层隐藏
|
|
|
+ dialogFormVisible: false,
|
|
|
+ // 弹出层内容
|
|
|
+ editNews: {
|
|
|
+ {% for table in table_objs -%}
|
|
|
+ {% if table['edit'] == True -%}
|
|
|
+ {{ table['prop'] }}: "",
|
|
|
+ {% endif -%}
|
|
|
+ {% endfor -%}
|
|
|
+ },
|
|
|
+ // 弹出层大小
|
|
|
+ formLabelWidth: '120px',
|
|
|
+ // 删除使用的id
|
|
|
+ id: '',
|
|
|
+ // 查询参数
|
|
|
+ param: {
|
|
|
+ {% for table in table_objs -%}
|
|
|
+ {% if table['search'] == True -%}
|
|
|
+ {{ table['prop'] }}: "",
|
|
|
+ {% endif -%}
|
|
|
+ {% endfor -%}
|
|
|
+ page: 1,
|
|
|
+ size: 10
|
|
|
+ },
|
|
|
+ // 查询返回总条数
|
|
|
+ total: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.queryList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 修改页面展示数据大小
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.param.size = val
|
|
|
+ this.queryList()
|
|
|
+ },
|
|
|
+ // 修改页码
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.param.page = val
|
|
|
+ this.queryList()
|
|
|
+ },
|
|
|
+ // 点击编辑,从后台获取数据
|
|
|
+ editOne(row) {
|
|
|
+ console.log(row)
|
|
|
+ fetchOne(row.id).then(res => {
|
|
|
+ if (res.flag) {
|
|
|
+ this.editNews = res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.dialogFormVisible = true
|
|
|
+ },
|
|
|
+ // 获取删除行的id
|
|
|
+ deleteAlert(id) {
|
|
|
+ this.id = id
|
|
|
+ this.dialogVisible = true
|
|
|
+ },
|
|
|
+ // 删除
|
|
|
+ deleteOne() {
|
|
|
+ deleteOne(this.id).then(res => {
|
|
|
+ if (res.flag) {
|
|
|
+ this.dialogFormVisible = false
|
|
|
+ this.queryList()
|
|
|
+ } else {
|
|
|
+ alert('删除失败')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.dialogVisible = false
|
|
|
+ },
|
|
|
+ // 关闭提示框时,提示是否要关闭
|
|
|
+ handleClose(done) {
|
|
|
+ this.$confirm('确认关闭?')
|
|
|
+ .then(() => {
|
|
|
+ done()
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 点击添加按钮清空
|
|
|
+ createOne() {
|
|
|
+ this.editNews = {}
|
|
|
+ this.dialogFormVisible = true
|
|
|
+ },
|
|
|
+ // 点击确定后发送请求
|
|
|
+ saveOne() {
|
|
|
+ saveOne(this.editNews).then(res => {
|
|
|
+ if (res.flag) {
|
|
|
+ this.dialogFormVisible = false
|
|
|
+ this.queryList()
|
|
|
+ } else {
|
|
|
+ this.$message('添加失败')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取数据
|
|
|
+ queryList() {
|
|
|
+ fetchList(this.param).then(res => {
|
|
|
+ if (res.flag) {
|
|
|
+ this.tableData = res.data.list
|
|
|
+ this.total = res.data.total
|
|
|
+ } else {
|
|
|
+ this.tableData = {}
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|