teacher.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
  1. <template>
  2. <el-row :gutter="20">
  3. <el-col :span="24" :xs="24">
  4. <!-- 搜索 -->
  5. <ContentWrap>
  6. <el-form
  7. class="-mb-15px"
  8. :model="queryParams"
  9. ref="queryFormRef"
  10. :inline="true"
  11. label-width="68px"
  12. >
  13. <el-form-item label="用户名称" prop="username">
  14. <el-input
  15. v-model="queryParams.username"
  16. placeholder="请输入用户名称"
  17. clearable
  18. @keyup.enter="handleQuery"
  19. class="!w-240px"
  20. />
  21. </el-form-item>
  22. <el-form-item label="手机号码" prop="mobile">
  23. <el-input
  24. v-model="queryParams.mobile"
  25. placeholder="请输入手机号码"
  26. clearable
  27. @keyup.enter="handleQuery"
  28. class="!w-240px"
  29. />
  30. </el-form-item>
  31. <el-form-item label="状态" prop="status">
  32. <el-select
  33. v-model="queryParams.status"
  34. placeholder="用户状态"
  35. clearable
  36. class="!w-240px"
  37. >
  38. <el-option
  39. v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
  40. :key="dict.value"
  41. :label="dict.label"
  42. :value="dict.value"
  43. />
  44. </el-select>
  45. </el-form-item>
  46. <el-form-item label="创建时间" prop="createTime">
  47. <el-date-picker
  48. v-model="queryParams.createTime"
  49. value-format="YYYY-MM-DD HH:mm:ss"
  50. type="datetimerange"
  51. start-placeholder="开始日期"
  52. end-placeholder="结束日期"
  53. class="!w-240px"
  54. />
  55. </el-form-item>
  56. <el-form-item>
  57. <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
  58. <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
  59. <!-- 暂时不在这新增 -->
  60. <el-button
  61. type="primary"
  62. plain
  63. @click="openForm('create')"
  64. v-hasPermi="['system:user:create']"
  65. >
  66. <Icon icon="ep:plus" /> 新增
  67. </el-button>
  68. <el-button
  69. type="warning"
  70. plain
  71. @click="handleImport"
  72. v-hasPermi="['system:user:import']"
  73. >
  74. <Icon icon="ep:upload" /> 导入
  75. </el-button>
  76. <el-button
  77. type="success"
  78. plain
  79. @click="handleExport"
  80. :loading="exportLoading"
  81. v-hasPermi="['system:user:export']"
  82. >
  83. <Icon icon="ep:download" />导出
  84. </el-button>
  85. </el-form-item>
  86. </el-form>
  87. </ContentWrap>
  88. <ContentWrap>
  89. <el-table v-loading="loading" :data="list">
  90. <el-table-column label="用户编号" align="center" key="id" prop="id" />
  91. <el-table-column
  92. label="用户名称"
  93. align="center"
  94. prop="username"
  95. :show-overflow-tooltip="true"
  96. />
  97. <el-table-column
  98. label="用户昵称"
  99. align="center"
  100. prop="nickname"
  101. :show-overflow-tooltip="true"
  102. />
  103. <el-table-column
  104. label="工作间"
  105. align="center"
  106. key="deptName"
  107. prop="deptName"
  108. :show-overflow-tooltip="true"
  109. />
  110. <el-table-column label="手机号码" align="center" prop="mobile" width="120" />
  111. <el-table-column label="状态" key="status">
  112. <template #default="scope">
  113. <el-switch
  114. v-model="scope.row.status"
  115. :active-value="0"
  116. :inactive-value="1"
  117. @change="handleStatusChange(scope.row)"
  118. />
  119. </template>
  120. </el-table-column>
  121. <el-table-column
  122. label="创建时间"
  123. align="center"
  124. prop="createTime"
  125. :formatter="dateFormatter"
  126. width="180"
  127. />
  128. <el-table-column label="操作" align="center" width="160">
  129. <template #default="scope">
  130. <div class="flex items-center justify-center">
  131. <el-button
  132. type="primary"
  133. link
  134. @click="openForm('update', scope.row.id)"
  135. v-hasPermi="['system:user:update']"
  136. >
  137. <Icon icon="ep:edit" />修改
  138. </el-button>
  139. <el-button type="text" @click="openUserAchievement(scope.row.id)">
  140. 成果详情
  141. </el-button>
  142. <el-dropdown
  143. @command="(command) => handleCommand(command, scope.row)"
  144. v-hasPermi="[
  145. 'system:user:delete',
  146. 'system:user:update-password',
  147. 'system:permission:assign-user-role'
  148. ]"
  149. >
  150. <el-button type="primary" link><Icon icon="ep:d-arrow-right" /> 更多</el-button>
  151. <template #dropdown>
  152. <el-dropdown-menu>
  153. <el-dropdown-item
  154. command="handleDelete"
  155. v-if="checkPermi(['system:user:delete'])"
  156. >
  157. <Icon icon="ep:delete" />删除
  158. </el-dropdown-item>
  159. <el-dropdown-item
  160. command="handleResetPwd"
  161. v-if="checkPermi(['system:user:update-password'])"
  162. >
  163. <Icon icon="ep:key" />重置密码
  164. </el-dropdown-item>
  165. <el-dropdown-item
  166. command="handleRole"
  167. v-if="checkPermi(['system:permission:assign-user-role'])"
  168. >
  169. <Icon icon="ep:circle-check" />分配角色
  170. </el-dropdown-item>
  171. </el-dropdown-menu>
  172. </template>
  173. </el-dropdown>
  174. </div>
  175. </template>
  176. </el-table-column>
  177. </el-table>
  178. <Pagination
  179. :total="total"
  180. v-model:page="queryParams.pageNo"
  181. v-model:limit="queryParams.pageSize"
  182. @pagination="getList"
  183. />
  184. </ContentWrap>
  185. </el-col>
  186. </el-row>
  187. <!-- 添加或修改用户对话框 -->
  188. <UserForm ref="formRef" @success="getList" />
  189. <!-- 用户导入对话框 -->
  190. <UserImportForm ref="importFormRef" @success="getList" />
  191. <!-- 分配角色 -->
  192. <UserAssignRoleForm ref="assignRoleFormRef" @success="getList" />
  193. </template>
  194. <script lang="ts" setup>
  195. import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
  196. import { checkPermi } from '@/utils/permission'
  197. import { dateFormatter } from '@/utils/formatTime'
  198. import download from '@/utils/download'
  199. import { CommonStatusEnum } from '@/utils/constants'
  200. import * as UserApi from '@/api/system/user'
  201. import UserForm from './UserForm.vue'
  202. import UserImportForm from './UserImportForm.vue'
  203. import UserAssignRoleForm from './UserAssignRoleForm.vue'
  204. import DeptTree from './DeptTree.vue'
  205. import { useRouter } from 'vue-router'
  206. defineOptions({ name: 'SystemUser' })
  207. const message = useMessage() // 消息弹窗
  208. const { t } = useI18n() // 国际化
  209. const loading = ref(true) // 列表的加载中
  210. const total = ref(0) // 列表的总页数
  211. const list = ref([]) // 列表的数
  212. const queryParams = reactive({
  213. pageNo: 1,
  214. pageSize: 10,
  215. username: undefined,
  216. mobile: undefined,
  217. status: undefined,
  218. deptId: undefined,
  219. createTime: []
  220. })
  221. const queryFormRef = ref() // 搜索的表单
  222. /** 查询列表 */
  223. const getList = async () => {
  224. loading.value = true
  225. try {
  226. const data = await UserApi.getDeptTeacherPage(queryParams)
  227. list.value = data.list
  228. total.value = data.total
  229. } finally {
  230. loading.value = false
  231. }
  232. }
  233. const router = useRouter()
  234. const openUserAchievement = (id) => {
  235. router.push({ name: 'UserAchievement', query: { id: id} });
  236. }
  237. /** 搜索按钮操作 */
  238. const handleQuery = () => {
  239. queryParams.pageNo = 1
  240. getList()
  241. }
  242. /** 重置按钮操作 */
  243. const resetQuery = () => {
  244. queryFormRef.value?.resetFields()
  245. handleQuery()
  246. }
  247. /** 添加/修改操作 */
  248. const formRef = ref()
  249. const openForm = (type: string, id?: number) => {
  250. formRef.value.open(type, id)
  251. }
  252. /** 用户导入 */
  253. const importFormRef = ref()
  254. const handleImport = () => {
  255. importFormRef.value.open()
  256. }
  257. /** 修改用户状态 */
  258. const handleStatusChange = async (row: UserApi.UserVO) => {
  259. try {
  260. // 修改状态的二次确认
  261. const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
  262. await message.confirm('确认要"' + text + '""' + row.username + '"用户吗?')
  263. // 发起修改状态
  264. await UserApi.updateUserStatus(row.id, row.status)
  265. // 刷新列表
  266. await getList()
  267. } catch {
  268. // 取消后,进行恢复按钮
  269. row.status =
  270. row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
  271. }
  272. }
  273. /** 导出按钮操作 */
  274. const exportLoading = ref(false)
  275. const handleExport = async () => {
  276. try {
  277. // 导出的二次确认
  278. await message.exportConfirm()
  279. // 发起导出
  280. exportLoading.value = true
  281. const data = await UserApi.exportUser(queryParams)
  282. download.excel(data, '用户数据.xls')
  283. } catch {
  284. } finally {
  285. exportLoading.value = false
  286. }
  287. }
  288. /** 操作分发 */
  289. const handleCommand = (command: string, row: UserApi.UserVO) => {
  290. switch (command) {
  291. case 'handleDelete':
  292. handleDelete(row.id)
  293. break
  294. case 'handleResetPwd':
  295. handleResetPwd(row)
  296. break
  297. case 'handleRole':
  298. handleRole(row)
  299. break
  300. default:
  301. break
  302. }
  303. }
  304. /** 删除按钮操作 */
  305. const handleDelete = async (id: number) => {
  306. try {
  307. // 删除的二次确认
  308. await message.delConfirm()
  309. // 发起删除
  310. await UserApi.deleteUser(id)
  311. message.success(t('common.delSuccess'))
  312. // 刷新列表
  313. await getList()
  314. } catch {}
  315. }
  316. /** 重置密码 */
  317. const handleResetPwd = async (row: UserApi.UserVO) => {
  318. try {
  319. // 重置的二次确认
  320. const result = await message.prompt(
  321. '请输入"' + row.username + '"的新密码',
  322. t('common.reminder')
  323. )
  324. const password = result.value
  325. // 发起重置
  326. await UserApi.resetUserPwd(row.id, password)
  327. message.success('修改成功,新密码是:' + password)
  328. } catch {}
  329. }
  330. /** 分配角色 */
  331. const assignRoleFormRef = ref()
  332. const handleRole = (row: UserApi.UserVO) => {
  333. assignRoleFormRef.value.open(row)
  334. }
  335. /** 初始化 */
  336. onMounted(() => {
  337. getList()
  338. })
  339. </script>