index.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <template>
  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. class="!w-240px"
  17. @keyup.enter="handleQuery"
  18. />
  19. </el-form-item>
  20. <el-form-item label="岗位编码" prop="code">
  21. <el-input
  22. v-model="queryParams.code"
  23. placeholder="请输入岗位编码"
  24. clearable
  25. class="!w-240px"
  26. @keyup.enter="handleQuery"
  27. />
  28. </el-form-item>
  29. <el-form-item label="状态" prop="status">
  30. <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
  31. <el-option
  32. v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
  33. :key="dict.value"
  34. :label="dict.label"
  35. :value="dict.value"
  36. />
  37. </el-select>
  38. </el-form-item>
  39. <el-form-item>
  40. <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
  41. <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
  42. <el-button
  43. type="primary"
  44. plain
  45. @click="openForm('create')"
  46. v-hasPermi="['system:post:create']"
  47. >
  48. <Icon icon="ep:plus" class="mr-5px" /> 新增
  49. </el-button>
  50. <el-button
  51. type="success"
  52. plain
  53. @click="handleExport"
  54. :loading="exportLoading"
  55. v-hasPermi="['system:post:export']"
  56. >
  57. <Icon icon="ep:download" class="mr-5px" /> 导出
  58. </el-button>
  59. </el-form-item>
  60. </el-form>
  61. </ContentWrap>
  62. <!-- 列表 -->
  63. <ContentWrap>
  64. <el-table v-loading="loading" :data="list">
  65. <el-table-column label="岗位编号" align="center" prop="id" />
  66. <el-table-column label="岗位名称" align="center" prop="name" />
  67. <el-table-column label="岗位编码" align="center" prop="code" />
  68. <el-table-column label="岗位顺序" align="center" prop="sort" />
  69. <el-table-column label="岗位备注" align="center" prop="remark" />
  70. <el-table-column label="状态" align="center" prop="status">
  71. <template #default="scope">
  72. <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
  73. </template>
  74. </el-table-column>
  75. <el-table-column
  76. label="创建时间"
  77. align="center"
  78. prop="createTime"
  79. width="180"
  80. :formatter="dateFormatter"
  81. />
  82. <el-table-column label="操作" align="center">
  83. <template #default="scope">
  84. <el-button
  85. link
  86. type="primary"
  87. @click="openForm('update', scope.row.id)"
  88. v-hasPermi="['system:post:update']"
  89. >
  90. 编辑
  91. </el-button>
  92. <el-button
  93. link
  94. type="danger"
  95. @click="handleDelete(scope.row.id)"
  96. v-hasPermi="['system:post:delete']"
  97. >
  98. 删除
  99. </el-button>
  100. </template>
  101. </el-table-column>
  102. </el-table>
  103. <!-- 分页 -->
  104. <Pagination
  105. :total="total"
  106. v-model:page="queryParams.pageNo"
  107. v-model:limit="queryParams.pageSize"
  108. @pagination="getList"
  109. />
  110. </ContentWrap>
  111. <!-- 表单弹窗:添加/修改 -->
  112. <PostForm ref="formRef" @success="getList" />
  113. </template>
  114. <script lang="ts" setup>
  115. import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
  116. import { dateFormatter } from '@/utils/formatTime'
  117. import download from '@/utils/download'
  118. import * as PostApi from '@/api/system/post'
  119. import PostForm from './PostForm.vue'
  120. defineOptions({ name: 'SystemPost' })
  121. const message = useMessage() // 消息弹窗
  122. const { t } = useI18n() // 国际化
  123. const loading = ref(true) // 列表的加载中
  124. const total = ref(0) // 列表的总页数
  125. const list = ref([]) // 列表的数据
  126. const queryParams = reactive({
  127. pageNo: 1,
  128. pageSize: 10,
  129. code: '',
  130. name: '',
  131. status: undefined
  132. })
  133. const queryFormRef = ref() // 搜索的表单
  134. const exportLoading = ref(false) // 导出的加载中
  135. /** 查询岗位列表 */
  136. const getList = async () => {
  137. loading.value = true
  138. try {
  139. const data = await PostApi.getPostPage(queryParams)
  140. list.value = data.list
  141. total.value = data.total
  142. } finally {
  143. loading.value = false
  144. }
  145. }
  146. /** 搜索按钮操作 */
  147. const handleQuery = () => {
  148. queryParams.pageNo = 1
  149. getList()
  150. }
  151. /** 重置按钮操作 */
  152. const resetQuery = () => {
  153. queryFormRef.value.resetFields()
  154. handleQuery()
  155. }
  156. /** 添加/修改操作 */
  157. const formRef = ref()
  158. const openForm = (type: string, id?: number) => {
  159. formRef.value.open(type, id)
  160. }
  161. /** 删除按钮操作 */
  162. const handleDelete = async (id: number) => {
  163. try {
  164. // 删除的二次确认
  165. await message.delConfirm()
  166. // 发起删除
  167. await PostApi.deletePost(id)
  168. message.success(t('common.delSuccess'))
  169. // 刷新列表
  170. await getList()
  171. } catch {}
  172. }
  173. /** 导出按钮操作 */
  174. const handleExport = async () => {
  175. try {
  176. // 导出的二次确认
  177. await message.exportConfirm()
  178. // 发起导出
  179. exportLoading.value = true
  180. const data = await PostApi.exportPost(queryParams)
  181. download.excel(data, '岗位列表.xls')
  182. } catch {
  183. } finally {
  184. exportLoading.value = false
  185. }
  186. }
  187. /** 初始化 **/
  188. onMounted(() => {
  189. getList()
  190. })
  191. </script>