index.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. <template>
  2. <!-- 搜索工作栏 -->
  3. <ContentWrap>
  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="code">
  12. <el-input
  13. v-model="queryParams.code"
  14. placeholder="请输入流程标识"
  15. clearable
  16. @keyup.enter="handleQuery"
  17. class="!w-240px"
  18. />
  19. </el-form-item>
  20. <el-form-item label="流程名称" prop="name">
  21. <el-input
  22. v-model="queryParams.name"
  23. placeholder="请输入流程名称"
  24. clearable
  25. @keyup.enter="handleQuery"
  26. class="!w-240px"
  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 label="创建时间" prop="createTime">
  40. <el-date-picker
  41. v-model="queryParams.createTime"
  42. value-format="YYYY-MM-DD HH:mm:ss"
  43. type="daterange"
  44. start-placeholder="开始日期"
  45. end-placeholder="结束日期"
  46. :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
  47. class="!w-240px"
  48. />
  49. </el-form-item>
  50. <el-form-item>
  51. <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
  52. <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
  53. <el-button
  54. type="primary"
  55. plain
  56. @click="openForm('create')"
  57. v-hasPermi="['ai:workflow:create']"
  58. >
  59. <Icon icon="ep:plus" /> 新增
  60. </el-button>
  61. </el-form-item>
  62. </el-form>
  63. </ContentWrap>
  64. <!-- 列表 -->
  65. <ContentWrap>
  66. <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
  67. <el-table-column label="编号" align="center" prop="id" />
  68. <el-table-column label="流程标识" align="center" prop="code" />
  69. <el-table-column label="流程名称" align="center" prop="name" />
  70. <el-table-column
  71. label="创建时间"
  72. align="center"
  73. prop="createTime"
  74. :formatter="dateFormatter"
  75. />
  76. <el-table-column label="备注" align="center" prop="remark" />
  77. <el-table-column label="状态" align="center" key="status">
  78. <template #default="scope">
  79. <el-switch
  80. v-model="scope.row.status"
  81. :active-value="0"
  82. :inactive-value="1"
  83. disabled
  84. />
  85. </template>
  86. </el-table-column>
  87. <el-table-column label="操作" align="center" fixed="right">
  88. <template #default="scope">
  89. <el-button
  90. type="primary"
  91. link
  92. @click="openForm('update', scope.row.id)"
  93. v-hasPermi="['ai:workflow:update']"
  94. >
  95. 修改
  96. </el-button>
  97. <el-button
  98. link
  99. type="danger"
  100. @click="handleDelete(scope.row.id)"
  101. v-hasPermi="['ai:workflow:delete']"
  102. >
  103. 删除
  104. </el-button>
  105. </template>
  106. </el-table-column>
  107. </el-table>
  108. <!-- 分页 -->
  109. <Pagination
  110. :total="total"
  111. v-model:page="queryParams.pageNo"
  112. v-model:limit="queryParams.pageSize"
  113. @pagination="getList"
  114. />
  115. </ContentWrap>
  116. <!-- 添加或修改工作流对话框 -->
  117. </template>
  118. <script setup lang="ts">
  119. import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
  120. import * as WorkflowApi from '@/api/ai/workflow'
  121. import { dateFormatter } from '@/utils/formatTime'
  122. import { checkPermi } from '@/utils/permission'
  123. defineOptions({ name: 'AiWorkflow' })
  124. const message = useMessage() // 消息弹窗
  125. const { t } = useI18n() // 国际化
  126. const { push } = useRouter() // 路由
  127. const loading = ref(true) // 列表的加载中
  128. const list = ref([]) // 列表的数据
  129. const total = ref(0) // 列表的总页数
  130. const queryParams = reactive({
  131. pageNo: 1,
  132. pageSize: 10,
  133. code: '',
  134. name: '',
  135. status: undefined,
  136. createTime: []
  137. })
  138. const queryFormRef = ref() // 搜索的表单
  139. /** 查询列表 */
  140. const getList = async () => {
  141. loading.value = true
  142. try {
  143. const data = await WorkflowApi.getWorkflowPage(queryParams)
  144. list.value = data.list
  145. total.value = data.total
  146. } finally {
  147. loading.value = false
  148. }
  149. }
  150. /** 搜索按钮操作 */
  151. const handleQuery = () => {
  152. queryParams.pageNo = 1
  153. getList()
  154. }
  155. /** 重置按钮操作 */
  156. const resetQuery = () => {
  157. queryFormRef.value.resetFields()
  158. handleQuery()
  159. }
  160. /** 删除按钮操作 */
  161. const handleDelete = async (id: number) => {
  162. try {
  163. // 删除的二次确认
  164. await message.delConfirm()
  165. // 发起删除
  166. await WorkflowApi.deleteWorkflow(id)
  167. message.success(t('common.delSuccess'))
  168. // 刷新列表
  169. await getList()
  170. } catch {}
  171. }
  172. /** 添加/修改操作 */
  173. const openForm = async (type: string, id?: number) => {
  174. if (type === 'create') {
  175. await push({ name: 'AiWorkflowCreate' })
  176. } else {
  177. await push({
  178. name: 'AiWorkflowUpdate',
  179. params: { id, type }
  180. })
  181. }
  182. }
  183. /** 初始化 **/
  184. onMounted(async () => {
  185. getList()
  186. })
  187. </script>