工业互联网平台前端 vue2版本
查看 | 历史 | 提交 | 提交对比
houzhongjian
2024-07-11 759b1c71011abd6b58c37d2566f3f3c208c2f1b2
提交 | 用户 | 时间
759b1c 1 <template>
H 2   <div class="app-container">
3     <!-- 搜索工作栏 -->
4     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
5       <el-form-item label="名字" prop="name">
6         <el-input v-model="queryParams.name" placeholder="请输入名字" clearable @keyup.enter.native="handleQuery"/>
7       </el-form-item>
8       <el-form-item label="父级编号" prop="parentId">
9         <el-input v-model="queryParams.parentId" placeholder="请输入父级编号" clearable @keyup.enter.native="handleQuery"/>
10       </el-form-item>
11       <el-form-item label="创建时间" prop="createTime">
12         <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
13                         range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
14       </el-form-item>
15       <el-form-item>
16         <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
17         <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
18       </el-form-item>
19     </el-form>
20
21     <!-- 操作工具栏 -->
22     <el-row :gutter="10" class="mb8">
23       <el-col :span="1.5">
24         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openForm(undefined)"
25                    v-hasPermi="['infra:demo02-category:create']">新增</el-button>
26       </el-col>
27       <el-col :span="1.5">
28         <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
29                    v-hasPermi="['infra:demo02-category:export']">导出</el-button>
30       </el-col>
31       <el-col :span="1.5">
32         <el-button type="danger" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">
33           展开/折叠
34         </el-button>
35       </el-col>
36       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
37     </el-row>
38
39     <el-table
40         v-loading="loading"
41         :data="list"
42         :stripe="true"
43         :show-overflow-tooltip="true"
44         v-if="refreshTable"
45         row-key="id"
46         :default-expand-all="isExpandAll"
47         :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
48     >
49       <el-table-column label="编号" align="center" prop="id" />
50       <el-table-column label="名字" align="center" prop="name" />
51       <el-table-column label="父级编号" align="center" prop="parentId" />
52       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
53         <template v-slot="scope">
54           <span>{{ parseTime(scope.row.createTime) }}</span>
55         </template>
56       </el-table-column>
57       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
58         <template v-slot="scope">
59           <el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row.id)"
60                      v-hasPermi="['infra:demo02-category:update']">修改</el-button>
61           <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
62                      v-hasPermi="['infra:demo02-category:delete']">删除</el-button>
63         </template>
64       </el-table-column>
65     </el-table>
66     <!-- 对话框(添加 / 修改) -->
67     <Demo02CategoryForm ref="formRef" @success="getList" />
68   </div>
69 </template>
70
71 <script>
72 import * as Demo02CategoryApi from '@/api/infra/demo02';
73 import Demo02CategoryForm from './Demo02CategoryForm.vue';
74 export default {
75   name: "Demo02Category",
76   components: {
77     Demo02CategoryForm,
78   },
79   data() {
80     return {
81       // 遮罩层
82       loading: true,
83       // 导出遮罩层
84       exportLoading: false,
85       // 显示搜索条件
86       showSearch: true,
87       // 示例分类列表
88       list: [],
89       // 是否展开，默认全部展开
90       isExpandAll: true,
91       // 重新渲染表格状态
92       refreshTable: true,
93       // 选中行
94       currentRow: {},
95       // 查询参数
96       queryParams: {
97         name: null,
98         parentId: null,
99         createTime: [],
100       },
101     };
102   },
103   created() {
104     this.getList();
105   },
106   methods: {
107     /** 查询列表 */
108     async getList() {
109       try {
110         this.loading = true;
111         const res = await Demo02CategoryApi.getDemo02CategoryList(this.queryParams);
112         this.list = this.handleTree(res.data, 'id', 'parentId');
113       } finally {
114         this.loading = false;
115       }
116     },
117     /** 搜索按钮操作 */
118     handleQuery() {
119       this.queryParams.pageNo = 1;
120       this.getList();
121     },
122     /** 重置按钮操作 */
123     resetQuery() {
124       this.resetForm("queryForm");
125       this.handleQuery();
126     },
127     /** 添加/修改操作 */
128     openForm(id) {
129       this.$refs["formRef"].open(id);
130     },
131     /** 删除按钮操作 */
132     async handleDelete(row) {
133       const id = row.id;
134       await this.$modal.confirm('是否确认删除示例分类编号为"' + id + '"的数据项?')
135       try {
136         await Demo02CategoryApi.deleteDemo02Category(id);
137         await this.getList();
138         this.$modal.msgSuccess("删除成功");
139       } catch {}
140     },
141     /** 导出按钮操作 */
142     async handleExport() {
143       await this.$modal.confirm('是否确认导出所有示例分类数据项?');
144       try {
145         this.exportLoading = true;
146         const res = await Demo02CategoryApi.exportDemo02CategoryExcel(this.queryParams);
147         this.$download.excel(res.data, '示例分类.xls');
148       } catch {
149       } finally {
150         this.exportLoading = false;
151       }
152     },
153     /** 展开/折叠操作 */
154     toggleExpandAll() {
155       this.refreshTable = false
156       this.isExpandAll = !this.isExpandAll
157       this.$nextTick(function () {
158         this.refreshTable = true
159       })
160     }
161   }
162 };
163 </script>