树形表格.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  1. <template>
  2. <div class="layout-padding">
  3. <div class="layout-padding-auto layout-padding-view">
  4. #if($queryList)
  5. <!-- 查询表单区域 -->
  6. <el-row v-show="showSearch">
  7. <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
  8. #foreach($field in $queryList)
  9. #if($field.queryFormType == 'select')
  10. <el-form-item label="#if(${field.fieldComment})${field.fieldComment}#else${field.attrName}#end" prop="${field.attrName}">
  11. <el-select v-model="state.queryForm.${field.attrName}" placeholder="请选择#if(${field.fieldComment})${field.fieldComment}#else${field.attrName}#end">
  12. #if($field.fieldDict)
  13. <el-option
  14. :label="item.label"
  15. :value="item.value"
  16. v-for="(item, index) in ${field.fieldDict}"
  17. :key="index"
  18. />
  19. #else
  20. <el-option label="请选择" value="0" />
  21. #end
  22. </el-select>
  23. </el-form-item>
  24. #elseif($field.queryFormType == 'date')
  25. <el-form-item label="#if(${field.fieldComment})${field.fieldComment}#else${field.attrName}#end" prop="${field.attrName}">
  26. <el-date-picker
  27. type="date"
  28. placeholder="请输入#if(${field.fieldComment})${field.fieldComment}#else${field.attrName}#end"
  29. v-model="state.queryForm.${field.attrName}"
  30. :value-format="dateStr"
  31. />
  32. </el-form-item>
  33. #elseif($field.queryFormType == 'datetime')
  34. <el-form-item label="#if(${field.fieldComment})${field.fieldComment}#else${field.attrName}#end" prop="${field.attrName}">
  35. <el-date-picker
  36. type="datetime"
  37. placeholder="请输入#if(${field.fieldComment})${field.fieldComment}#else${field.attrName}#end"
  38. v-model="state.queryForm.${field.attrName}"
  39. :value-format="dateTimeStr"
  40. />
  41. </el-form-item>
  42. #elseif($field.formType == 'radio')
  43. <el-form-item label="#if(${field.fieldComment})${field.fieldComment}#else${field.attrName}#end" prop="${field.attrName}">
  44. <el-radio-group v-model="state.queryForm.${field.attrName}">
  45. #if($field.fieldDict)
  46. <el-radio
  47. :label="item.value"
  48. v-for="(item, index) in ${field.fieldDict}"
  49. border
  50. :key="index"
  51. >
  52. {{ item.label }}
  53. </el-radio>
  54. #else
  55. <el-radio label="${field.fieldComment}" border>
  56. ${field.fieldComment}
  57. </el-radio>
  58. #end
  59. </el-radio-group>
  60. </el-form-item>
  61. #else
  62. <el-form-item label="#if(${field.fieldComment})${field.fieldComment}#else${field.attrName}#end" prop="${field.attrName}">
  63. <el-input
  64. placeholder="请输入#if(${field.fieldComment})${field.fieldComment}#else${field.attrName}#end"
  65. v-model="state.queryForm.${field.attrName}"
  66. />
  67. </el-form-item>
  68. #end
  69. #end
  70. <el-form-item>
  71. <el-button icon="search" type="primary" @click="getDataList">
  72. 查询
  73. </el-button>
  74. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  75. </el-form-item>
  76. </el-form>
  77. </el-row>
  78. #end
  79. <!-- 操作按钮区域 -->
  80. <el-row>
  81. <div class="mb8" style="width: 100%">
  82. <el-button
  83. icon="folder-add"
  84. type="primary"
  85. class="ml10"
  86. @click="formDialogRef.openDialog()"
  87. v-auth="'${moduleName}_${functionName}_add'"
  88. >
  89. 新增
  90. </el-button>
  91. <el-button
  92. plain
  93. :disabled="multiple"
  94. icon="Delete"
  95. type="primary"
  96. v-auth="'${moduleName}_${functionName}_del'"
  97. @click="handleDelete(selectObjs)"
  98. >
  99. 删除
  100. </el-button>
  101. <right-toolbar
  102. v-model:showSearch="showSearch"
  103. class="ml10 mr20"
  104. style="float: right;"
  105. @queryTable="getDataList"
  106. />
  107. </div>
  108. </el-row>
  109. <!-- 树形数据表格区域 -->
  110. <el-table
  111. :data="state.dataList"
  112. v-loading="state.loading"
  113. border
  114. row-key="${pk.attrName}"
  115. :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  116. :cell-style="tableStyle.cellStyle"
  117. :header-cell-style="tableStyle.headerCellStyle"
  118. @selection-change="selectionChangHandle"
  119. >
  120. <el-table-column type="selection" width="40" align="center" />
  121. <el-table-column type="index" label="#" width="40" />
  122. #foreach($field in $gridList)
  123. #if($field.fieldDict)
  124. <el-table-column prop="${field.attrName}" label="#if(${field.fieldComment})${field.fieldComment}#else${field.attrName}#end" show-overflow-tooltip>
  125. <template #default="scope">
  126. <dict-tag :options="${field.fieldDict}" :value="scope.row.${field.attrName}" />
  127. </template>
  128. </el-table-column>
  129. #else
  130. <el-table-column
  131. prop="${field.attrName}"
  132. label="#if(${field.fieldComment})${field.fieldComment}#else${field.attrName}#end"
  133. show-overflow-tooltip
  134. #if($field == $gridList[0])
  135. width="200"
  136. #end
  137. />
  138. #end
  139. #end
  140. <el-table-column label="操作" width="200" fixed="right">
  141. <template #default="scope">
  142. <el-button
  143. icon="plus"
  144. text
  145. type="primary"
  146. v-auth="'${moduleName}_${functionName}_add'"
  147. @click="formDialogRef.openDialog(undefined, scope.row.${pk.attrName})"
  148. >
  149. 新增
  150. </el-button>
  151. <el-button
  152. icon="edit-pen"
  153. text
  154. type="primary"
  155. v-auth="'${moduleName}_${functionName}_edit'"
  156. @click="formDialogRef.openDialog(scope.row.${pk.attrName})"
  157. >
  158. 编辑
  159. </el-button>
  160. <el-button
  161. icon="delete"
  162. text
  163. type="primary"
  164. v-auth="'${moduleName}_${functionName}_del'"
  165. @click="handleDelete([scope.row.${pk.attrName}])"
  166. >
  167. 删除
  168. </el-button>
  169. </template>
  170. </el-table-column>
  171. </el-table>
  172. </div>
  173. <!-- 编辑、新增弹窗 -->
  174. <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
  175. </div>
  176. </template>
  177. <script setup lang="ts" name="system${ClassName}Tree">
  178. // ========== 导入声明 ==========
  179. import { BasicTableProps, useTable } from "/@/hooks/table";
  180. import { fetchTreeList, delObjs } from "/@/api/${moduleName}/${functionName}";
  181. import { useMessage, useMessageBox } from "/@/hooks/message";
  182. import { useDict } from '/@/hooks/dict';
  183. // ========== 组件声明 ==========
  184. // 异步加载表单弹窗组件
  185. const FormDialog = defineAsyncComponent(() => import('./form.vue'));
  186. // ========== 字典数据 ==========
  187. #set($fieldDict=[])
  188. #foreach($field in $queryList)
  189. #if($field.fieldDict)
  190. #set($void=$fieldDict.add($field.fieldDict))
  191. #end
  192. #end
  193. #foreach($field in $gridList)
  194. #if($field.fieldDict)
  195. #set($void=$fieldDict.add($field.fieldDict))
  196. #end
  197. #end
  198. #if($fieldDict && $fieldDict.size() > 0)
  199. // 加载字典数据
  200. const { $dict.format($fieldDict) } = useDict($dict.quotation($fieldDict));
  201. #end
  202. // ========== 组件引用 ==========
  203. const formDialogRef = ref(); // 表单弹窗引用
  204. const queryRef = ref(); // 查询表单引用
  205. // ========== 响应式数据 ==========
  206. const showSearch = ref(true); // 是否显示搜索区域
  207. const selectObjs = ref([]) as any; // 表格多选数据
  208. const multiple = ref(true); // 是否多选
  209. // ========== 表格状态 ==========
  210. const state: BasicTableProps = reactive<BasicTableProps>({
  211. isPage: false, // 是否分页
  212. queryForm: {}, // 查询参数
  213. pageList: fetchTreeList, // 树形数据查询方法(不分页)
  214. loading: false, // 加载状态
  215. dataList: [] // 数据列表
  216. });
  217. // ========== Hook引用 ==========
  218. // 表格相关Hook (树形表格不使用分页)
  219. const {
  220. getDataList,
  221. tableStyle
  222. } = useTable(state);
  223. // ========== 方法定义 ==========
  224. /**
  225. * 重置查询条件
  226. */
  227. const resetQuery = () => {
  228. // 清空搜索条件
  229. queryRef.value?.resetFields();
  230. // 清空多选
  231. selectObjs.value = [];
  232. // 重新查询
  233. getDataList();
  234. };
  235. /**
  236. * 表格多选事件处理
  237. * @param objs 选中的数据行
  238. */
  239. const selectionChangHandle = (objs: { ${pk.attrName}: string }[]) => {
  240. selectObjs.value = objs.map(({ ${pk.attrName} }) => ${pk.attrName});
  241. multiple.value = !objs.length;
  242. };
  243. /**
  244. * 删除数据处理
  245. * @param ids 要删除的数据ID数组
  246. */
  247. const handleDelete = async (ids: string[]) => {
  248. try {
  249. await useMessageBox().confirm('此操作将永久删除选中数据及其子数据,是否继续?');
  250. } catch {
  251. return;
  252. }
  253. try {
  254. await delObjs(ids);
  255. getDataList();
  256. useMessage().success('删除成功');
  257. } catch (err: any) {
  258. useMessage().error(err.msg);
  259. }
  260. };
  261. // ========== 生命周期 ==========
  262. // 组件挂载时获取数据
  263. onMounted(() => {
  264. getDataList();
  265. });
  266. </script>