python-base--/jinja2-demo/results/templates/vue_table.j2

<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>