工业互联网平台前端 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="sex">
9         <el-select v-model="queryParams.sex" placeholder="请选择性别" clearable size="small">
10           <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_USER_SEX)"
11                      :key="dict.value" :label="dict.label" :value="dict.value"/>
12         </el-select>
13       </el-form-item>
14       <el-form-item label="出生日期" prop="birthday">
15         <el-date-picker clearable v-model="queryParams.birthday" type="date" value-format="yyyy-MM-dd" placeholder="选择出生日期" />
16       </el-form-item>
17       <el-form-item label="创建时间" prop="createTime">
18         <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
19                         range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
20       </el-form-item>
21       <el-form-item>
22         <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
23         <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
24       </el-form-item>
25     </el-form>
26
27     <!-- 操作工具栏 -->
28     <el-row :gutter="10" class="mb8">
29       <el-col :span="1.5">
30         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openForm(undefined)"
31                    v-hasPermi="['infra:demo03-student:create']">新增</el-button>
32       </el-col>
33       <el-col :span="1.5">
34         <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
35                    v-hasPermi="['infra:demo03-student:export']">导出</el-button>
36       </el-col>
37       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
38     </el-row>
39
40     <el-table
41         v-loading="loading"
42         :data="list"
43         :stripe="true"
44         :highlight-current-row="true"
45         :show-overflow-tooltip="true"
46         @current-change="handleCurrentChange"
47     >
48       <el-table-column label="编号" align="center" prop="id" />
49       <el-table-column label="名字" align="center" prop="name" />
50       <el-table-column label="性别" align="center" prop="sex">
51         <template v-slot="scope">
52           <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex" />
53         </template>
54       </el-table-column>
55       <el-table-column label="出生日期" align="center" prop="birthday" width="180">
56         <template v-slot="scope">
57           <span>{{ parseTime(scope.row.birthday) }}</span>
58         </template>
59       </el-table-column>
60       <el-table-column label="简介" align="center" prop="description" />
61       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
62         <template v-slot="scope">
63           <span>{{ parseTime(scope.row.createTime) }}</span>
64         </template>
65       </el-table-column>
66       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
67         <template v-slot="scope">
68           <el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row.id)"
69                      v-hasPermi="['infra:demo03-student:update']">修改</el-button>
70           <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
71                      v-hasPermi="['infra:demo03-student:delete']">删除</el-button>
72         </template>
73       </el-table-column>
74     </el-table>
75     <!-- 分页组件 -->
76     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
77                 @pagination="getList"/>
78     <!-- 对话框(添加 / 修改) -->
79     <Demo03StudentForm ref="formRef" @success="getList" />
80     <!-- 子表的列表 -->
81     <el-tabs v-model="subTabsName">
82       <el-tab-pane label="学生课程" name="demo03Course">
83         <Demo03CourseList v-if="currentRow.id" :student-id="currentRow.id" />
84       </el-tab-pane>
85       <el-tab-pane label="学生班级" name="demo03Grade">
86         <Demo03GradeList v-if="currentRow.id" :student-id="currentRow.id" />
87       </el-tab-pane>
88     </el-tabs>
89   </div>
90 </template>
91
92 <script>
93 import * as Demo03StudentApi from '@/api/infra/demo03-erp';
94 import Demo03StudentForm from './Demo03StudentForm.vue';
95 import Demo03CourseList from './components/Demo03CourseList.vue';
96 import Demo03GradeList from './components/Demo03GradeList.vue';
97 export default {
98   name: "Demo03Student",
99   components: {
100     Demo03StudentForm,
101     Demo03CourseList,
102     Demo03GradeList,
103   },
104   data() {
105     return {
106       // 遮罩层
107       loading: true,
108       // 导出遮罩层
109       exportLoading: false,
110       // 显示搜索条件
111       showSearch: true,
112       // 总条数
113       total: 0,
114       // 学生列表
115       list: [],
116       // 是否展开，默认全部展开
117       isExpandAll: true,
118       // 重新渲染表格状态
119       refreshTable: true,
120       // 选中行
121       currentRow: {},
122       // 查询参数
123       queryParams: {
124         pageNo: 1,
125         pageSize: 10,
126         name: null,
127         sex: null,
128         birthday: null,
129         description: null,
130         createTime: [],
131       },
132       /** 子表的列表 */
133       subTabsName: 'demo03Course'
134     };
135   },
136   created() {
137     this.getList();
138   },
139   methods: {
140     /** 查询列表 */
141     async getList() {
142       try {
143         this.loading = true;
144         const res = await Demo03StudentApi.getDemo03StudentPage(this.queryParams);
145         this.list = res.data.list;
146         this.total = res.data.total;
147       } finally {
148         this.loading = false;
149       }
150     },
151     /** 搜索按钮操作 */
152     handleQuery() {
153       this.queryParams.pageNo = 1;
154       this.getList();
155     },
156     /** 重置按钮操作 */
157     resetQuery() {
158       this.resetForm("queryForm");
159       this.handleQuery();
160     },
161     /** 添加/修改操作 */
162     openForm(id) {
163       this.$refs["formRef"].open(id);
164     },
165     /** 删除按钮操作 */
166     async handleDelete(row) {
167       const id = row.id;
168       await this.$modal.confirm('是否确认删除学生编号为"' + id + '"的数据项?')
169       try {
170         await Demo03StudentApi.deleteDemo03Student(id);
171         await this.getList();
172         this.$modal.msgSuccess("删除成功");
173       } catch {}
174     },
175     /** 导出按钮操作 */
176     async handleExport() {
177       await this.$modal.confirm('是否确认导出所有学生数据项?');
178       try {
179         this.exportLoading = true;
180         const res = await Demo03StudentApi.exportDemo03StudentExcel(this.queryParams);
181         this.$download.excel(res.data, '学生.xls');
182       } catch {
183       } finally {
184         this.exportLoading = false;
185       }
186     },
187     /** 选中行操作 */
188     handleCurrentChange(row) {
189       this.currentRow = row;
190       /** 子表的列表 */
191       this.subTabsName = 'demo03Course';
192     },
193   }
194 };
195 </script>