index.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. <script setup lang="ts">
  2. import { ref, unref } from 'vue'
  3. import dayjs from 'dayjs'
  4. import { ElMessage } from 'element-plus'
  5. import { DICT_TYPE } from '@/utils/dict'
  6. import { useTable } from '@/hooks/web/useTable'
  7. import { useI18n } from '@/hooks/web/useI18n'
  8. import { FormExpose } from '@/components/Form'
  9. import type { FormVO } from '@/api/bpm/form/types'
  10. import { rules, allSchemas } from './form.data'
  11. import * as FormApi from '@/api/bpm/form'
  12. const { t } = useI18n() // 国际化
  13. // ========== 列表相关 ==========
  14. const { register, tableObject, methods } = useTable<FormVO>({
  15. getListApi: FormApi.getFormPageApi,
  16. delListApi: FormApi.deleteFormApi
  17. })
  18. const { getList, setSearchParams, delList } = methods
  19. // ========== CRUD 相关 ==========
  20. const actionLoading = ref(false) // 遮罩层
  21. const actionType = ref('') // 操作按钮的类型
  22. const dialogVisible = ref(false) // 是否显示弹出层
  23. const dialogTitle = ref('edit') // 弹出层标题
  24. const formRef = ref<FormExpose>() // 表单 Ref
  25. // 设置标题
  26. const setDialogTile = (type: string) => {
  27. dialogTitle.value = t('action.' + type)
  28. actionType.value = type
  29. dialogVisible.value = true
  30. }
  31. // 新增操作
  32. const handleCreate = () => {
  33. setDialogTile('create')
  34. // 重置表单
  35. unref(formRef)?.getElFormRef()?.resetFields()
  36. }
  37. // 修改操作
  38. const handleUpdate = async (row: FormVO) => {
  39. setDialogTile('update')
  40. // 设置数据
  41. const res = await FormApi.getFormApi(row.id)
  42. unref(formRef)?.setValues(res)
  43. }
  44. // 提交按钮
  45. const submitForm = async () => {
  46. actionLoading.value = true
  47. // 提交请求
  48. try {
  49. const data = unref(formRef)?.formModel as FormVO
  50. if (actionType.value === 'create') {
  51. await FormApi.createFormApi(data)
  52. ElMessage.success(t('common.createSuccess'))
  53. } else {
  54. await FormApi.updateFormApi(data)
  55. ElMessage.success(t('common.updateSuccess'))
  56. }
  57. // 操作成功,重新加载列表
  58. dialogVisible.value = false
  59. await getList()
  60. } finally {
  61. actionLoading.value = false
  62. }
  63. }
  64. // ========== 详情相关 ==========
  65. const detailRef = ref() // 详情 Ref
  66. // 详情操作
  67. const handleDetail = async (row: FormVO) => {
  68. // 设置数据
  69. detailRef.value = row
  70. setDialogTile('detail')
  71. }
  72. // ========== 初始化 ==========
  73. getList()
  74. </script>
  75. <template>
  76. <!-- 搜索工作区 -->
  77. <ContentWrap>
  78. <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
  79. </ContentWrap>
  80. <ContentWrap>
  81. <!-- 操作工具栏 -->
  82. <div class="mb-10px">
  83. <el-button type="primary" v-hasPermi="['bpm:form:create']" @click="handleCreate">
  84. <Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
  85. </el-button>
  86. </div>
  87. <!-- 列表 -->
  88. <Table
  89. :columns="allSchemas.tableColumns"
  90. :selection="false"
  91. :data="tableObject.tableList"
  92. :loading="tableObject.loading"
  93. :pagination="{
  94. total: tableObject.total
  95. }"
  96. v-model:pageSize="tableObject.pageSize"
  97. v-model:currentPage="tableObject.currentPage"
  98. @register="register"
  99. >
  100. <template #status="{ row }">
  101. <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
  102. </template>
  103. <template #createTime="{ row }">
  104. <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
  105. </template>
  106. <template #action="{ row }">
  107. <el-button link type="primary" v-hasPermi="['bpm:form:update']" @click="handleUpdate(row)">
  108. <Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }}
  109. </el-button>
  110. <el-button link type="primary" v-hasPermi="['bpm:form:update']" @click="handleDetail(row)">
  111. <Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
  112. </el-button>
  113. <el-button
  114. link
  115. type="primary"
  116. v-hasPermi="['bpm:form:delete']"
  117. @click="delList(row.id, false)"
  118. >
  119. <Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
  120. </el-button>
  121. </template>
  122. </Table>
  123. </ContentWrap>
  124. <Dialog v-model="dialogVisible" :title="dialogTitle">
  125. <!-- 对话框(添加 / 修改) -->
  126. <Form
  127. v-if="['create', 'update'].includes(actionType)"
  128. :schema="allSchemas.formSchema"
  129. :rules="rules"
  130. ref="formRef"
  131. />
  132. <!-- 对话框(详情) -->
  133. <Descriptions
  134. v-if="actionType === 'detail'"
  135. :schema="allSchemas.detailSchema"
  136. :data="detailRef"
  137. >
  138. <template #status="{ row }">
  139. <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
  140. </template>
  141. <template #createTime="{ row }">
  142. <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
  143. </template>
  144. </Descriptions>
  145. <!-- 操作按钮 -->
  146. <template #footer>
  147. <el-button
  148. v-if="['create', 'update'].includes(actionType)"
  149. type="primary"
  150. :loading="actionLoading"
  151. @click="submitForm"
  152. >
  153. {{ t('action.save') }}
  154. </el-button>
  155. <el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
  156. </template>
  157. </Dialog>
  158. </template>