index.vue.vm 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
  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. #set ($dictMethods = [])## 使用到的 dict 字典方法
  12. #foreach($column in $columns)
  13. #if ($column.listOperation)
  14. #set ($dictType = $column.dictType)
  15. #set ($javaField = $column.javaField)
  16. #set ($javaType = $column.javaType)
  17. #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
  18. #set ($comment = $column.columnComment)
  19. #set ($dictMethod = "getDictOptions")## 计算使用哪个 dict 字典方法
  20. #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short")
  21. #set ($dictMethod = "getIntDictOptions")
  22. #elseif ($javaType == "String")
  23. #set ($dictMethod = "getStrDictOptions")
  24. #elseif ($javaType == "Boolean")
  25. #set ($dictMethod = "getBoolDictOptions")
  26. #end
  27. #if ($column.htmlType == "input")
  28. <el-form-item label="${comment}" prop="${javaField}">
  29. <el-input
  30. v-model="queryParams.${javaField}"
  31. placeholder="请输入${comment}"
  32. clearable
  33. @keyup.enter="handleQuery"
  34. class="!w-240px"
  35. />
  36. </el-form-item>
  37. #elseif ($column.htmlType == "select" || $column.htmlType == "radio")
  38. <el-form-item label="${comment}" prop="${javaField}">
  39. #if ($javaField.length() + $comment.length() > 8)
  40. <el-select
  41. v-model="queryParams.${javaField}"
  42. placeholder="请选择${comment}"
  43. clearable
  44. class="!w-240px"
  45. >
  46. #else
  47. <el-select v-model="queryParams.${javaField}" placeholder="请选择${comment}" clearable class="!w-240px">
  48. #end
  49. #if ("" != $dictType)## 设置了 dictType 数据字典的情况
  50. #if (!$dictMethods.contains($dictMethod))## 如果不存在,则添加到 dictMethods 数组中,后续好 import
  51. #set($ignore = $dictMethods.add($dictMethod) )
  52. #end
  53. <el-option
  54. v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
  55. :key="dict.value"
  56. :label="dict.label"
  57. :value="dict.value"
  58. />
  59. #else## 未设置 dictType 数据字典的情况
  60. <el-option label="请选择字典生成" value="" />
  61. #end
  62. </el-select>
  63. </el-form-item>
  64. #elseif($column.htmlType == "datetime")
  65. #if ($column.listOperationCondition != "BETWEEN")## 非范围
  66. <el-form-item label="${comment}" prop="${javaField}">
  67. <el-date-picker
  68. v-model="queryParams.${javaField}"
  69. value-format="yyyy-MM-dd"
  70. type="date"
  71. placeholder="选择${comment}"
  72. clearable
  73. class="!w-240px"
  74. />
  75. </el-form-item>
  76. #else## 范围
  77. <el-form-item label="${comment}" prop="${javaField}">
  78. <el-date-picker
  79. v-model="queryParams.${javaField}"
  80. value-format="yyyy-MM-dd HH:mm:ss"
  81. type="daterange"
  82. start-placeholder="开始日期"
  83. end-placeholder="结束日期"
  84. :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
  85. class="!w-240px"
  86. />
  87. </el-form-item>
  88. #end
  89. #end
  90. #end
  91. #end
  92. <el-form-item>
  93. <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
  94. <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
  95. #if ($permissionPrefix.length() <= 12)
  96. <el-button type="primary" @click="openForm('create')" v-hasPermi="['${permissionPrefix}:create']">
  97. #else
  98. <el-button
  99. type="primary"
  100. plain
  101. @click="openForm('create')"
  102. v-hasPermi="['${permissionPrefix}:create']"
  103. >
  104. #end
  105. <Icon icon="ep:plus" class="mr-5px" /> 新增
  106. </el-button>
  107. <el-button
  108. type="success"
  109. plain
  110. @click="handleExport"
  111. :loading="exportLoading"
  112. v-hasPermi="['${permissionPrefix}:export']"
  113. >
  114. <Icon icon="ep:download" class="mr-5px" /> 导出
  115. </el-button>
  116. </el-form-item>
  117. </el-form>
  118. </ContentWrap>
  119. <!-- 列表 -->
  120. <ContentWrap>
  121. <el-table v-loading="loading" :data="list">
  122. #foreach($column in $columns)
  123. #if ($column.listOperationResult)
  124. #set ($dictType=$column.dictType)
  125. #set ($javaField = $column.javaField)
  126. #set ($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
  127. #set ($comment=$column.columnComment)
  128. #if ($column.javaType == "LocalDateTime")## 时间类型
  129. <el-table-column
  130. label="${comment}"
  131. align="center"
  132. prop="${javaField}"
  133. :formatter="dateFormatter"
  134. />
  135. #elseif("" != $column.dictType)## 数据字典
  136. <el-table-column label="${comment}" align="center" prop="${javaField}">
  137. <template #default="scope">
  138. <dict-tag :type="DICT_TYPE.$dictType.toUpperCase()" :value="scope.row.${column.javaField}" />
  139. </template>
  140. </el-table-column>
  141. #else
  142. <el-table-column label="${comment}" align="center" prop="${javaField}" />
  143. #end
  144. #end
  145. #end
  146. <el-table-column label="操作" align="center">
  147. <template #default="scope">
  148. <el-button
  149. link
  150. type="primary"
  151. @click="openForm('update', scope.row.id)"
  152. v-hasPermi="['${permissionPrefix}:update']"
  153. >
  154. 编辑
  155. </el-button>
  156. <el-button
  157. link
  158. type="danger"
  159. @click="handleDelete(scope.row.id)"
  160. v-hasPermi="['${permissionPrefix}:delete']"
  161. >
  162. 删除
  163. </el-button>
  164. </template>
  165. </el-table-column>
  166. </el-table>
  167. <!-- 分页 -->
  168. <Pagination
  169. :total="total"
  170. v-model:page="queryParams.pageNo"
  171. v-model:limit="queryParams.pageSize"
  172. @pagination="getList"
  173. />
  174. </ContentWrap>
  175. <!-- 表单弹窗:添加/修改 -->
  176. <${simpleClassName}Form ref="formRef" @success="getList" />
  177. </template>
  178. <script setup lang="ts" name="${table.className}">
  179. #if ($dictMethods.size() > 0)
  180. import { DICT_TYPE#foreach ($dictMethod in $dictMethods), ${dictMethod}#end } from '@/utils/dict'
  181. #end
  182. #foreach ($column in $columns)
  183. #if ($column.listOperationResult && $column.htmlType == "datetime")
  184. import { dateFormatter } from '@/utils/formatTime'
  185. #break
  186. #end
  187. #end
  188. import download from '@/utils/download'
  189. import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${classNameVar}'
  190. import ${simpleClassName}Form from './${simpleClassName}Form.vue'
  191. const message = useMessage() // 消息弹窗
  192. const { t } = useI18n() // 国际化
  193. const loading = ref(true) // 列表的加载中
  194. const total = ref(0) // 列表的总页数
  195. const list = ref([]) // 列表的数据
  196. const queryParams = reactive({
  197. pageNo: 1,
  198. pageSize: 10,
  199. #set ($listOperationLastIndex = -1)## 求最后一个需要 , 的地方
  200. #foreach ($column in $columns)
  201. #if ($column.listOperation)
  202. #set ($listOperationLastIndex = $foreach.index)
  203. #end
  204. #end
  205. #foreach ($column in $columns)
  206. #if ($column.listOperation)
  207. #if ($column.listOperationCondition != 'BETWEEN')
  208. $column.javaField: null#if($foreach.index < $listOperationLastIndex),#end
  209. #end
  210. #if ($column.htmlType == "datetime" || $column.listOperationCondition == "BETWEEN")
  211. $column.javaField: []#if($foreach.index < $listOperationLastIndex),#end
  212. #end
  213. #end
  214. #end
  215. })
  216. const queryFormRef = ref() // 搜索的表单
  217. const exportLoading = ref(false) // 导出的加载中
  218. /** 查询列表 */
  219. const getList = async () => {
  220. loading.value = true
  221. try {
  222. const data = await ${simpleClassName}Api.get${simpleClassName}Page(queryParams)
  223. list.value = data.list
  224. total.value = data.total
  225. } finally {
  226. loading.value = false
  227. }
  228. }
  229. /** 搜索按钮操作 */
  230. const handleQuery = () => {
  231. queryParams.pageNo = 1
  232. getList()
  233. }
  234. /** 重置按钮操作 */
  235. const resetQuery = () => {
  236. queryFormRef.value.resetFields()
  237. handleQuery()
  238. }
  239. /** 添加/修改操作 */
  240. const formRef = ref()
  241. const openForm = (type: string, id?: number) => {
  242. formRef.value.open(type, id)
  243. }
  244. /** 删除按钮操作 */
  245. const handleDelete = async (id: number) => {
  246. try {
  247. // 删除的二次确认
  248. await message.delConfirm()
  249. // 发起删除
  250. await ${simpleClassName}Api.delete${simpleClassName}(id)
  251. message.success(t('common.delSuccess'))
  252. // 刷新列表
  253. await getList()
  254. } catch {}
  255. }
  256. /** 导出按钮操作 */
  257. const handleExport = async () => {
  258. try {
  259. // 导出的二次确认
  260. await message.exportConfirm()
  261. // 发起导出
  262. exportLoading.value = true
  263. const data = await ${simpleClassName}Api.export${simpleClassName}(queryParams)
  264. download.excel(data, '${table.classComment}.xls')
  265. } catch {
  266. } finally {
  267. exportLoading.value = false
  268. }
  269. }
  270. /** 初始化 **/
  271. onMounted(() => {
  272. getList()
  273. })
  274. </script>