1+ <#include "/macro.include ">
2+ <#assign className = table.className>
3+ <#assign classNameLower = className?uncap_first>
4+ <template>
5+ <div>
6+ <!-- 查询表单 -->
7+ <el-form :inline="true" :model="searchForm" label-width="100px" size="small">
8+
9+ <#list table.columns as column>
10+ <el-form-item label="${column.columnAlias!}">
11+ <el-input v-model.trim="searchForm.${column.columnNameLower}" placeholder="请输入${column.columnAlias!}" clearable />
12+ </el-form-item>
13+ </#list>
14+
15+ <el-row type="flex">
16+ <el-form-item>
17+ <el-button type="primary" v-if="isAuth('${moduleName}:${classNameLower}:list')" icon="el-icon-search" @click="list(searchForm)">查询</el-button>
18+ <el-button type="primary" v-if="isAuth('${moduleName}:${classNameLower}:add')" icon="el-icon-plus" @click="preById(null)">新增</el-button>
19+ </el-form-item>
20+ </el-row>
21+
22+ </el-form>
23+
24+ <!-- 数据表格 -->
25+ <el-table :data="tableData" v-loading="tableLoading" border style="width: 100%">
26+
27+ <#list table.columns as column>
28+ <el-table-column prop="${column.columnNameLower}" label="${column.columnAlias!}" align="center" min-width="100" show-overflow-tooltip />
29+ </#list>
30+
31+ <el-table-column label="操作" align="center" fixed="right" min-width="100">
32+ <template slot-scope="scope">
33+ <el-button type="text" v-if="isAuth('${moduleName}:${classNameLower}:update')" @click="preById(scope.row.<#list table.columns as column><#if column.pk>${column.columnNameLower}</#if></#list>)">编辑</el-button>
34+ <el-button type="text" v-if="isAuth('${moduleName}:${classNameLower}:delete')" @click="delById(scope.row.<#list table.columns as column><#if column.pk>${column.columnNameLower}</#if></#list>)">删除</el-button>
35+ </template>
36+ </el-table-column>
37+
38+ </el-table>
39+
40+ <div align="right" style="margin-top:10px;">
41+ <el-pagination
42+ :current-page="searchForm.page"
43+ :page-sizes="[20, 40, 60, 80]"
44+ :page-size="searchForm.rows"
45+ :total="totalCount"
46+ layout="total, sizes, prev, pager, next, jumper"
47+ @size-change="handleSizeChange"
48+ @current-change="handleCurrentChange"/>
49+ </div>
50+
51+ <!-- 弹窗 -->
52+ <edit ref="edit" @refreshTableData="list(searchForm)"></edit>
53+ </div>
54+ </template>
55+
56+ <script>
57+ import Edit from './${classNameLower}Edit'
58+ import * as ${classNameLower} from '@/api/${moduleName}/${classNameLower}'
59+
60+ export default {
61+ name: '${className}',
62+ data () {
63+ return {
64+ // 表格加载条控制
65+ tableLoading: false,
66+ // Table数据
67+ tableData: [],
68+ // Table数据总条数
69+ totalCount: 0,
70+ // 查询表单属性
71+ searchForm: {
72+ // 当前页
73+ page: 1,
74+ // 每页条数
75+ rows: 20,
76+ <#list table.columns as column>
77+ '${column.columnNameLower}': null<#if column_has_next>,</#if>
78+ </#list>
79+ }
80+ }
81+ },
82+ components: {
83+ Edit
84+ },
85+ // 启动时就执行
86+ mounted: function () {
87+
88+ },
89+ // 获取活动窗口
90+ activated () {
91+ // 列表查询
92+ this.list(this.searchForm)
93+ },
94+ methods: {
95+ // 每页条数改变
96+ handleSizeChange: function (rows) {
97+ this.searchForm.rows = rows
98+ // 刷新列表
99+ this.list(this.searchForm)
100+ },
101+ // 当前页数改变
102+ handleCurrentChange: function (page) {
103+ this.searchForm.page = page
104+ // 刷新列表
105+ this.list(this.searchForm)
106+ },
107+ // 列表查询
108+ list: function (searchForm) {
109+ // 加载显示
110+ this.tableLoading = true
111+ ${classNameLower}.list(searchForm).then(response => {
112+ const data = response.data.data
113+ this.tableData = data.data
114+ this.totalCount = data.count
115+ // 加载完成
116+ this.tableLoading = false
117+ })
118+ },
119+ // 调用子组件的preById方法
120+ preById: function (<#list table.columns as column><#if column.pk>${column.columnNameLower}</#if></#list>) {
121+ // this.$nextTick Dom渲染完执行
122+ /* this.$nextTick(() => {
123+ this.$refs.edit.preById(<#list table.columns as column><#if column.pk>${column.columnNameLower}</#if></#list>)
124+ }) */
125+ this.$refs.edit.preById(<#list table.columns as column><#if column.pk>${column.columnNameLower}</#if></#list>)
126+ },
127+ // 删除
128+ delById: function (<#list table.columns as column><#if column.pk>${column.columnNameLower}</#if></#list>) {
129+ this.$confirm('是否确定删除?', '提示', {
130+ confirmButtonText: '确定',
131+ cancelButtonText: '取消',
132+ type: 'warning'
133+ }).then(() => {
134+ // 确定执行删除
135+ ${classNameLower}.delById(<#list table.columns as column><#if column.pk>${column.columnNameLower}</#if></#list>).then(response => {
136+ const data = response.data
137+ this.$message({
138+ type: 'success',
139+ message: data.msg
140+ })
141+ // 刷新列表
142+ this.list(this.searchForm)
143+ })
144+ }).catch(() => {
145+
146+ })
147+ }
148+ }
149+ }
150+ </script>
151+
152+ <!-- Add "scoped" attribute to limit CSS to this component only -->
153+ <style scoped>
154+
155+ </style>
0 commit comments