工业互联网平台
查看 | 历史 | 提交 | 提交对比
dengzedong
2024-12-19 85b2001c0ec2f1adc598db3bf47ad457dcca7074
提交 | 用户 | 时间
e7c126 1 <template>
H 2   <ContentWrap>
3     <!-- 搜索工作栏 -->
4     <el-form
5       class="-mb-15px"
6       :model="queryParams"
7       ref="queryFormRef"
8       :inline="true"
9       label-width="68px"
10     >
11       <el-form-item label="名字" prop="name">
12         <el-input
13           v-model="queryParams.name"
14           placeholder="请输入名字"
15           clearable
16           @keyup.enter="handleQuery"
17           class="!w-240px"
18         />
19       </el-form-item>
20       <el-form-item label="出生日期" prop="birthday">
21         <el-date-picker
22           v-model="queryParams.birthday"
23           value-format="YYYY-MM-DD"
24           type="date"
25           placeholder="选择出生日期"
26           clearable
27           class="!w-240px"
28         />
29       </el-form-item>
30       <el-form-item label="性别" prop="sex">
31         <el-select
32           v-model="queryParams.sex"
33           placeholder="请选择性别"
34           clearable
35           class="!w-240px"
36         >
37           <el-option
38             v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
39             :key="dict.value"
40             :label="dict.label"
41             :value="dict.value"
42           />
43         </el-select>
44       </el-form-item>
45       <el-form-item label="是否有效" prop="enabled">
46         <el-select
47           v-model="queryParams.enabled"
48           placeholder="请选择是否有效"
49           clearable
50           class="!w-240px"
51         >
52           <el-option
53             v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
54             :key="dict.value"
55             :label="dict.label"
56             :value="dict.value"
57           />
58         </el-select>
59       </el-form-item>
60       <el-form-item label="创建时间" prop="createTime">
61         <el-date-picker
62           v-model="queryParams.createTime"
63           value-format="YYYY-MM-DD HH:mm:ss"
64           type="daterange"
65           start-placeholder="开始日期"
66           end-placeholder="结束日期"
67           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
68           class="!w-240px"
69         />
70       </el-form-item>
71       <el-form-item>
72         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
73         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
74         <el-button
75           type="primary"
76           plain
77           @click="openForm('create')"
78           v-hasPermi="['infra:student:create']"
79         >
80           <Icon icon="ep:plus" class="mr-5px" /> 新增
81         </el-button>
82         <el-button
83           type="success"
84           plain
85           @click="handleExport"
86           :loading="exportLoading"
87           v-hasPermi="['infra:student:export']"
88         >
89           <Icon icon="ep:download" class="mr-5px" /> 导出
90         </el-button>
91       </el-form-item>
92     </el-form>
93   </ContentWrap>
94
95   <!-- 列表 -->
96   <ContentWrap>
97     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
98       <el-table-column label="编号" align="center" prop="id" />
99       <el-table-column label="名字" align="center" prop="name" />
100       <el-table-column label="简介" align="center" prop="description" />
101       <el-table-column
102         label="出生日期"
103         align="center"
104         prop="birthday"
105         :formatter="dateFormatter"
106         width="180px"
107       />
108       <el-table-column label="性别" align="center" prop="sex">
109         <template #default="scope">
110           <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex" />
111         </template>
112       </el-table-column>
113       <el-table-column label="是否有效" align="center" prop="enabled">
114         <template #default="scope">
115           <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.enabled" />
116         </template>
117       </el-table-column>
118       <el-table-column label="头像" align="center" prop="avatar" />
119       <el-table-column label="附件" align="center" prop="video" />
120       <el-table-column label="备注" align="center" prop="memo" />
121       <el-table-column
122         label="创建时间"
123         align="center"
124         prop="createTime"
125         :formatter="dateFormatter"
126         width="180px"
127       />
128       <el-table-column label="操作" align="center">
129         <template #default="scope">
130           <el-button
131             link
132             type="primary"
133             @click="openForm('update', scope.row.id)"
134             v-hasPermi="['infra:student:update']"
135           >
136             编辑
137           </el-button>
138           <el-button
139             link
140             type="danger"
141             @click="handleDelete(scope.row.id)"
142             v-hasPermi="['infra:student:delete']"
143           >
144             删除
145           </el-button>
146         </template>
147       </el-table-column>
148     </el-table>
149     <!-- 分页 -->
150     <Pagination
151       :total="total"
152       v-model:page="queryParams.pageNo"
153       v-model:limit="queryParams.pageSize"
154       @pagination="getList"
155     />
156   </ContentWrap>
157
158   <!-- 表单弹窗：添加/修改 -->
159   <StudentForm ref="formRef" @success="getList" />
160 </template>
161
162 <script setup lang="ts">
163 import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
164 import { dateFormatter } from '@/utils/formatTime'
165 import download from '@/utils/download'
166 import * as StudentApi from '@/api/infra/demo'
167 import StudentForm from './StudentForm.vue'
168
169 defineOptions({ name: 'InfraStudent' })
170
171 const message = useMessage() // 消息弹窗
172 const { t } = useI18n() // 国际化
173
174 const loading = ref(true) // 列表的加载中
175 const list = ref([]) // 列表的数据
176 const total = ref(0) // 列表的总页数
177 const queryParams = reactive({
178   pageNo: 1,
179   pageSize: 10,
180   name: undefined,
181   birthday: undefined,
182   birthday: [],
183   sex: undefined,
184   enabled: undefined,
185   createTime: [],
186 })
187 const queryFormRef = ref() // 搜索的表单
188 const exportLoading = ref(false) // 导出的加载中
189
190 /** 查询列表 */
191 const getList = async () => {
192   loading.value = true
193   try {
194     const data = await StudentApi.getStudentPage(queryParams)
195     list.value = data.list
196     total.value = data.total
197   } finally {
198     loading.value = false
199   }
200 }
201
202 /** 搜索按钮操作 */
203 const handleQuery = () => {
204   queryParams.pageNo = 1
205   getList()
206 }
207
208 /** 重置按钮操作 */
209 const resetQuery = () => {
210   queryFormRef.value.resetFields()
211   handleQuery()
212 }
213
214 /** 添加/修改操作 */
215 const formRef = ref()
216 const openForm = (type: string, id?: number) => {
217   formRef.value.open(type, id)
218 }
219
220 /** 删除按钮操作 */
221 const handleDelete = async (id: number) => {
222   try {
223     // 删除的二次确认
224     await message.delConfirm()
225     // 发起删除
226     await StudentApi.deleteStudent(id)
227     message.success(t('common.delSuccess'))
228     // 刷新列表
229     await getList()
230   } catch {}
231 }
232
233 /** 导出按钮操作 */
234 const handleExport = async () => {
235   try {
236     // 导出的二次确认
237     await message.exportConfirm()
238     // 发起导出
239     exportLoading.value = true
240     const data = await StudentApi.exportStudent(queryParams)
241     download.excel(data, '学生.xls')
242   } catch {
243   } finally {
244     exportLoading.value = false
245   }
246 }
247
248 /** 初始化 **/
249 onMounted(() => {
250   getList()
251 })
252 </script>