index.vue.vm 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  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" :stripe="true" :show-overflow-tooltip="true">
  122. <el-table-column label="序号" type="index" width="70px" />
  123. #foreach($column in $columns)
  124. #if ($column.listOperationResult)
  125. #set ($dictType=$column.dictType)
  126. #set ($javaField = $column.javaField)
  127. #set ($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
  128. #set ($comment=$column.columnComment)
  129. #if ($column.javaType == "LocalDateTime")## 时间类型
  130. <el-table-column
  131. label="${comment}"
  132. align="center"
  133. prop="${javaField}"
  134. :formatter="dateFormatter"
  135. width="150px"
  136. />
  137. #elseif("" != $column.dictType)## 数据字典
  138. <el-table-column label="${comment}" align="center" prop="${javaField}" width="150px">
  139. <template #default="scope">
  140. <dict-tag :type="DICT_TYPE.$dictType.toUpperCase()" :value="scope.row.${column.javaField}" />
  141. </template>
  142. </el-table-column>
  143. #else
  144. <el-table-column label="${comment}" align="center" prop="${javaField}" width="150px"/>
  145. #end
  146. #end
  147. #end
  148. <el-table-column label="操作" align="center" width="150px">
  149. <template #default="scope">
  150. <el-button
  151. link
  152. type="primary"
  153. @click="openForm('update', scope.row.id)"
  154. v-hasPermi="['${permissionPrefix}:update']"
  155. >
  156. 编辑
  157. </el-button>
  158. <el-button
  159. link
  160. type="danger"
  161. @click="handleDelete(scope.row.id)"
  162. v-hasPermi="['${permissionPrefix}:delete']"
  163. >
  164. 删除
  165. </el-button>
  166. </template>
  167. </el-table-column>
  168. </el-table>
  169. <!-- 分页 -->
  170. <Pagination
  171. :total="total"
  172. v-model:page="queryParams.pageNo"
  173. v-model:limit="queryParams.pageSize"
  174. @pagination="getList"
  175. />
  176. </ContentWrap>
  177. <!-- 表单弹窗:添加/修改 -->
  178. <${simpleClassName}Form ref="formRef" @success="getList" />
  179. </template>
  180. <script setup lang="ts" name="${table.className}">
  181. #if ($dictMethods.size() > 0)
  182. import { DICT_TYPE#foreach ($dictMethod in $dictMethods), ${dictMethod}#end } from '@/utils/dict'
  183. #end
  184. #foreach ($column in $columns)
  185. #if ($column.listOperationResult && $column.htmlType == "datetime")
  186. import { dateFormatter } from '@/utils/formatTime'
  187. #break
  188. #end
  189. #end
  190. import download from '@/utils/download'
  191. import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${classNameVar}'
  192. import ${simpleClassName}Form from './${simpleClassName}Form.vue'
  193. const message = useMessage() // 消息弹窗
  194. const { t } = useI18n() // 国际化
  195. const loading = ref(true) // 列表的加载中
  196. const total = ref(0) // 列表的总页数
  197. const list = ref([]) // 列表的数据
  198. const queryParams = reactive({
  199. pageNo: 1,
  200. pageSize: 10,
  201. #set ($listOperationLastIndex = -1)## 求最后一个需要 , 的地方
  202. #foreach ($column in $columns)
  203. #if ($column.listOperation)
  204. #set ($listOperationLastIndex = $foreach.index)
  205. #end
  206. #end
  207. #foreach ($column in $columns)
  208. #if ($column.listOperation)
  209. #if ($column.listOperationCondition != 'BETWEEN')
  210. $column.javaField: null#if($foreach.index < $listOperationLastIndex),#end
  211. #end
  212. #if ($column.htmlType == "datetime" || $column.listOperationCondition == "BETWEEN")
  213. $column.javaField: []#if($foreach.index < $listOperationLastIndex),#end
  214. #end
  215. #end
  216. #end
  217. })
  218. const queryFormRef = ref() // 搜索的表单
  219. const exportLoading = ref(false) // 导出的加载中
  220. /** 查询列表 */
  221. const getList = async () => {
  222. loading.value = true
  223. try {
  224. const data = await ${simpleClassName}Api.get${simpleClassName}Page(queryParams)
  225. list.value = data.list
  226. total.value = data.total
  227. } finally {
  228. loading.value = false
  229. }
  230. }
  231. /** 搜索按钮操作 */
  232. const handleQuery = () => {
  233. queryParams.pageNo = 1
  234. getList()
  235. }
  236. /** 重置按钮操作 */
  237. const resetQuery = () => {
  238. queryFormRef.value.resetFields()
  239. handleQuery()
  240. }
  241. /** 添加/修改操作 */
  242. const formRef = ref()
  243. const openForm = (type: string, id?: number) => {
  244. formRef.value.open(type, id)
  245. }
  246. /** 删除按钮操作 */
  247. const handleDelete = async (id: number) => {
  248. try {
  249. // 删除的二次确认
  250. await message.delConfirm()
  251. // 发起删除
  252. await ${simpleClassName}Api.delete${simpleClassName}(id)
  253. message.success(t('common.delSuccess'))
  254. // 刷新列表
  255. await getList()
  256. } catch {}
  257. }
  258. /** 导出按钮操作 */
  259. const handleExport = async () => {
  260. try {
  261. // 导出的二次确认
  262. await message.exportConfirm()
  263. // 发起导出
  264. exportLoading.value = true
  265. const data = await ${simpleClassName}Api.export${simpleClassName}(queryParams)
  266. download.excel(data, '${table.classComment}.xls')
  267. } catch {
  268. } finally {
  269. exportLoading.value = false
  270. }
  271. }
  272. /** 初始化 **/
  273. onMounted(() => {
  274. getList()
  275. })
  276. </script>