index.vue.vm 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381
  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. #foreach($column in $columns)
  12. #if ($column.listOperation)
  13. #set ($dictType = $column.dictType)
  14. #set ($javaField = $column.javaField)
  15. #set ($javaType = $column.javaType)
  16. #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
  17. #set ($comment = $column.columnComment)
  18. #set ($dictMethod = "getDictOptions")## 计算使用哪个 dict 字典方法
  19. #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short")
  20. #set ($dictMethod = "getIntDictOptions")
  21. #elseif ($javaType == "String")
  22. #set ($dictMethod = "getStrDictOptions")
  23. #elseif ($javaType == "Boolean")
  24. #set ($dictMethod = "getBoolDictOptions")
  25. #end
  26. #if ($column.htmlType == "input")
  27. <el-form-item label="${comment}" prop="${javaField}">
  28. <el-input
  29. v-model="queryParams.${javaField}"
  30. placeholder="请输入${comment}"
  31. clearable
  32. @keyup.enter="handleQuery"
  33. class="!w-240px"
  34. />
  35. </el-form-item>
  36. #elseif ($column.htmlType == "select" || $column.htmlType == "radio")
  37. <el-form-item label="${comment}" prop="${javaField}">
  38. <el-select
  39. v-model="queryParams.${javaField}"
  40. placeholder="请选择${comment}"
  41. clearable
  42. class="!w-240px"
  43. >
  44. #if ("" != $dictType)## 设置了 dictType 数据字典的情况
  45. <el-option
  46. v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
  47. :key="dict.value"
  48. :label="dict.label"
  49. :value="dict.value"
  50. />
  51. #else## 未设置 dictType 数据字典的情况
  52. <el-option label="请选择字典生成" value="" />
  53. #end
  54. </el-select>
  55. </el-form-item>
  56. #elseif($column.htmlType == "datetime")
  57. #if ($column.listOperationCondition != "BETWEEN")## 非范围
  58. <el-form-item label="${comment}" prop="${javaField}">
  59. <el-date-picker
  60. v-model="queryParams.${javaField}"
  61. value-format="YYYY-MM-DD"
  62. type="date"
  63. placeholder="选择${comment}"
  64. clearable
  65. class="!w-240px"
  66. />
  67. </el-form-item>
  68. #else## 范围
  69. <el-form-item label="${comment}" prop="${javaField}">
  70. <el-date-picker
  71. v-model="queryParams.${javaField}"
  72. value-format="YYYY-MM-DD HH:mm:ss"
  73. type="daterange"
  74. start-placeholder="开始日期"
  75. end-placeholder="结束日期"
  76. :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
  77. class="!w-240px"
  78. />
  79. </el-form-item>
  80. #end
  81. #end
  82. #end
  83. #end
  84. <el-form-item>
  85. <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
  86. <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
  87. <el-button
  88. type="primary"
  89. plain
  90. @click="openForm('create')"
  91. v-hasPermi="['${permissionPrefix}:create']"
  92. >
  93. <Icon icon="ep:plus" class="mr-5px" /> 新增
  94. </el-button>
  95. <el-button
  96. type="success"
  97. plain
  98. @click="handleExport"
  99. :loading="exportLoading"
  100. v-hasPermi="['${permissionPrefix}:export']"
  101. >
  102. <Icon icon="ep:download" class="mr-5px" /> 导出
  103. </el-button>
  104. ## 特殊:树表专属逻辑
  105. #if ( $table.templateType == 2 )
  106. <el-button type="danger" plain @click="toggleExpandAll">
  107. <Icon icon="ep:sort" class="mr-5px" /> 展开/折叠
  108. </el-button>
  109. #end
  110. </el-form-item>
  111. </el-form>
  112. </ContentWrap>
  113. <!-- 列表 -->
  114. <ContentWrap>
  115. ## 特殊:主子表专属逻辑
  116. #if ( $table.templateType == 11 && $subTables && $subTables.size() > 0 )
  117. <el-table
  118. v-loading="loading"
  119. :data="list"
  120. :stripe="true"
  121. :show-overflow-tooltip="true"
  122. highlight-current-row
  123. @current-change="handleCurrentChange"
  124. >
  125. ## 特殊:树表专属逻辑
  126. #elseif ( $table.templateType == 2 )
  127. <el-table
  128. v-loading="loading"
  129. :data="list"
  130. :stripe="true"
  131. :show-overflow-tooltip="true"
  132. row-key="id"
  133. :default-expand-all="isExpandAll"
  134. v-if="refreshTable"
  135. >
  136. #else
  137. <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
  138. #end
  139. ## 特殊:主子表专属逻辑
  140. #if ( $table.templateType == 12 && $subTables && $subTables.size() > 0 )
  141. <!-- 子表的列表 -->
  142. <el-table-column type="expand">
  143. <template #default="scope">
  144. <el-tabs model-value="$subClassNameVars.get(0)">
  145. #foreach ($subTable in $subTables)
  146. #set ($index = $foreach.count - 1)
  147. #set ($subClassNameVar = $subClassNameVars.get($index))
  148. #set ($subSimpleClassName = $subSimpleClassNames.get($index))
  149. #set ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index))
  150. <el-tab-pane label="${subTable.classComment}" name="$subClassNameVar">
  151. <${subSimpleClassName}List :${subJoinColumn_strikeCase}="scope.row.id" />
  152. </el-tab-pane>
  153. #end
  154. </el-tabs>
  155. </template>
  156. </el-table-column>
  157. #end
  158. #foreach($column in $columns)
  159. #if ($column.listOperationResult)
  160. #set ($dictType=$column.dictType)
  161. #set ($javaField = $column.javaField)
  162. #set ($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
  163. #set ($comment=$column.columnComment)
  164. #if ($column.javaType == "LocalDateTime")## 时间类型
  165. <el-table-column
  166. label="${comment}"
  167. align="center"
  168. prop="${javaField}"
  169. :formatter="dateFormatter"
  170. width="180px"
  171. />
  172. #elseif($column.dictType && "" != $column.dictType)## 数据字典
  173. <el-table-column label="${comment}" align="center" prop="${javaField}">
  174. <template #default="scope">
  175. <dict-tag :type="DICT_TYPE.$dictType.toUpperCase()" :value="scope.row.${column.javaField}" />
  176. </template>
  177. </el-table-column>
  178. #else
  179. <el-table-column label="${comment}" align="center" prop="${javaField}" />
  180. #end
  181. #end
  182. #end
  183. <el-table-column label="操作" align="center">
  184. <template #default="scope">
  185. <el-button
  186. link
  187. type="primary"
  188. @click="openForm('update', scope.row.id)"
  189. v-hasPermi="['${permissionPrefix}:update']"
  190. >
  191. 编辑
  192. </el-button>
  193. <el-button
  194. link
  195. type="danger"
  196. @click="handleDelete(scope.row.id)"
  197. v-hasPermi="['${permissionPrefix}:delete']"
  198. >
  199. 删除
  200. </el-button>
  201. </template>
  202. </el-table-column>
  203. </el-table>
  204. <!-- 分页 -->
  205. <Pagination
  206. :total="total"
  207. v-model:page="queryParams.pageNo"
  208. v-model:limit="queryParams.pageSize"
  209. @pagination="getList"
  210. />
  211. </ContentWrap>
  212. <!-- 表单弹窗:添加/修改 -->
  213. <${simpleClassName}Form ref="formRef" @success="getList" />
  214. ## 特殊:主子表专属逻辑
  215. #if ( $table.templateType == 11 && $subTables && $subTables.size() > 0 )
  216. <!-- 子表的列表 -->
  217. <ContentWrap>
  218. <el-tabs model-value="$subClassNameVars.get(0)">
  219. #foreach ($subTable in $subTables)
  220. #set ($index = $foreach.count - 1)
  221. #set ($subClassNameVar = $subClassNameVars.get($index))
  222. #set ($subSimpleClassName = $subSimpleClassNames.get($index))
  223. #set ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index))
  224. <el-tab-pane label="${subTable.classComment}" name="$subClassNameVar">
  225. <${subSimpleClassName}List :${subJoinColumn_strikeCase}="currentRow.id" />
  226. </el-tab-pane>
  227. #end
  228. </el-tabs>
  229. </ContentWrap>
  230. #end
  231. </template>
  232. <script setup lang="ts">
  233. import { getIntDictOptions, getStrDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
  234. import { dateFormatter } from '@/utils/formatTime'
  235. ## 特殊:树表专属逻辑
  236. #if ( $table.templateType == 2 )
  237. import { handleTree } from '@/utils/tree'
  238. #end
  239. import download from '@/utils/download'
  240. import { ${simpleClassName}Api, ${simpleClassName}VO } from '@/api/${table.moduleName}/${table.businessName}'
  241. import ${simpleClassName}Form from './${simpleClassName}Form.vue'
  242. ## 特殊:主子表专属逻辑
  243. #if ( $table.templateType != 10 )
  244. #foreach ($subSimpleClassName in $subSimpleClassNames)
  245. import ${subSimpleClassName}List from './components/${subSimpleClassName}List.vue'
  246. #end
  247. #end
  248. /** ${table.classComment} 列表 */
  249. defineOptions({ name: '${table.className}' })
  250. // 消息弹窗
  251. const message = useMessage()
  252. // 国际化
  253. const { t } = useI18n()
  254. // 列表的加载中
  255. const loading = ref(true)
  256. // 列表的数据
  257. const list = ref<${simpleClassName}VO[]>([])
  258. ## 特殊:树表专属逻辑(树不需要分页接口)
  259. #if ( $table.templateType != 2 )
  260. // 列表的总页数
  261. const total = ref(0)
  262. #end
  263. const queryParams = reactive({
  264. ## 特殊:树表专属逻辑(树不需要分页接口)
  265. #if ( $table.templateType != 2 )
  266. pageNo: 1,
  267. pageSize: 10,
  268. #end
  269. #foreach ($column in $columns)
  270. #if ($column.listOperation)
  271. #if ($column.listOperationCondition != 'BETWEEN')
  272. $column.javaField: undefined,
  273. #end
  274. #if ($column.htmlType == "datetime" || $column.listOperationCondition == "BETWEEN")
  275. $column.javaField: [],
  276. #end
  277. #end
  278. #end
  279. })
  280. // 搜索的表单
  281. const queryFormRef = ref()
  282. // 导出的加载中
  283. const exportLoading = ref(false)
  284. /** 查询列表 */
  285. const getList = async () => {
  286. loading.value = true
  287. try {
  288. ## 特殊:树表专属逻辑(树不需要分页接口)
  289. #if ( $table.templateType == 2 )
  290. const data = await ${simpleClassName}Api.get${simpleClassName}List(queryParams)
  291. list.value = handleTree(data, 'id', '${treeParentColumn.javaField}')
  292. #else
  293. const data = await ${simpleClassName}Api.get${simpleClassName}Page(queryParams)
  294. list.value = data.list
  295. total.value = data.total
  296. #end
  297. } finally {
  298. loading.value = false
  299. }
  300. }
  301. /** 搜索按钮操作 */
  302. const handleQuery = () => {
  303. queryParams.pageNo = 1
  304. getList()
  305. }
  306. /** 重置按钮操作 */
  307. const resetQuery = () => {
  308. queryFormRef.value.resetFields()
  309. handleQuery()
  310. }
  311. /** 添加/修改操作 */
  312. const formRef = ref()
  313. const openForm = (type: string, id?: number) => {
  314. formRef.value.open(type, id)
  315. }
  316. /** 删除按钮操作 */
  317. const handleDelete = async (id: number) => {
  318. try {
  319. // 删除的二次确认
  320. await message.delConfirm()
  321. // 发起删除
  322. await ${simpleClassName}Api.delete${simpleClassName}(id)
  323. message.success(t('common.delSuccess'))
  324. // 刷新列表
  325. await getList()
  326. } catch {}
  327. }
  328. /** 导出按钮操作 */
  329. const handleExport = async () => {
  330. try {
  331. // 导出的二次确认
  332. await message.exportConfirm()
  333. // 发起导出
  334. exportLoading.value = true
  335. const data = await ${simpleClassName}Api.export${simpleClassName}(queryParams)
  336. download.excel(data, '${table.classComment}.xls')
  337. } catch {
  338. } finally {
  339. exportLoading.value = false
  340. }
  341. }
  342. ## 特殊:主子表专属逻辑
  343. #if ( $table.templateType == 11 )
  344. /** 选中行操作 */
  345. const currentRow = ref({}) // 选中行
  346. const handleCurrentChange = (row) => {
  347. currentRow.value = row
  348. }
  349. #end
  350. ## 特殊:树表专属逻辑
  351. #if ( $table.templateType == 2 )
  352. /** 展开/折叠操作 */
  353. const isExpandAll = ref(true) // 是否展开,默认全部展开
  354. const refreshTable = ref(true) // 重新渲染表格状态
  355. const toggleExpandAll = async () => {
  356. refreshTable.value = false
  357. isExpandAll.value = !isExpandAll.value
  358. await nextTick()
  359. refreshTable.value = true
  360. }
  361. #end
  362. /** 初始化 **/
  363. onMounted(() => {
  364. getList()
  365. })
  366. </script>