主子表格.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. <template>
  2. <div class="layout-padding">
  3. <div class="layout-padding-auto layout-padding-view">
  4. #if($queryList)
  5. <el-row v-show="showSearch">
  6. <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
  7. #foreach($field in $queryList)
  8. #if($field.queryFormType == 'select')
  9. <el-form-item label="#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end" prop="${field.attrName}">
  10. <el-select v-model="state.queryForm.${field.attrName}" placeholder="请选择#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end">
  11. #if($field.fieldDict)
  12. <el-option :label="item.label" :value="item.value" v-for="(item, index) in ${field.fieldDict}" :key="index"></el-option>
  13. #else
  14. <el-option label="请选择">0</el-option>
  15. #end
  16. </el-select>
  17. </el-form-item>
  18. #elseif($field.queryFormType == 'date')
  19. <el-form-item label="#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end" prop="${field.attrName}">
  20. <el-date-picker type="date" placeholder="请输入#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end" v-model="state.queryForm.${field.attrName}"></el-date-picker>
  21. </el-form-item>
  22. #elseif($field.queryFormType == 'datetime')
  23. <el-form-item label="#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end" prop="${field.attrName}" >
  24. <el-date-picker type="datetime" placeholder="请输入#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end" v-model="state.queryForm.${field.attrName}"></el-date-picker>
  25. </el-form-item>
  26. #elseif($field.formType == 'radio')
  27. <el-form-item label="#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end" prop="${field.attrName}">
  28. <el-radio-group v-model="state.queryForm.${field.attrName}">
  29. #if($field.fieldDict)
  30. <el-radio :label="item.value" v-for="(item, index) in ${field.fieldDict}" border :key="index">{{ item.label }}</el-radio>
  31. #else
  32. <el-radio label="${field.fieldComment}" border>${field.fieldComment}</el-radio>
  33. #end
  34. </el-radio-group>
  35. </el-form-item>
  36. #else
  37. <el-form-item label="#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end" prop="${field.attrName}" >
  38. <el-input placeholder="请输入#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end" v-model="state.queryForm.${field.attrName}"
  39. style="max-width: 180px" />
  40. </el-form-item>
  41. #end
  42. #end
  43. <el-form-item>
  44. <el-button icon="search" type="primary" @click="getDataList">
  45. 查询
  46. </el-button>
  47. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  48. </el-form-item>
  49. </el-form>
  50. </el-row>
  51. #end
  52. <el-row>
  53. <div class="mb8" style="width: 100%">
  54. <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
  55. v-auth="'${moduleName}_${functionName}_add'">
  56. 新 增
  57. </el-button>
  58. <el-button plain :disabled="multiple" icon="Delete" type="primary"
  59. v-auth="'${moduleName}_${functionName}_del'" @click="handleDelete(selectObjs)">
  60. 删除
  61. </el-button>
  62. <right-toolbar v-model:showSearch="showSearch" :export="'${moduleName}_${functionName}_export'"
  63. @exportExcel="exportExcel" class="ml10 mr20" style="float: right;"
  64. @queryTable="getDataList"></right-toolbar>
  65. </div>
  66. </el-row>
  67. <el-table :data="state.dataList" v-loading="state.loading" border
  68. :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
  69. @selection-change="selectionChangeHandle" @sort-change="sortChangeHandle">
  70. <el-table-column type="selection" width="40" align="center" />
  71. <el-table-column type="index" label="#" width="40" />
  72. #foreach($field in $gridList)
  73. #if($field.fieldDict)
  74. <el-table-column prop="${field.attrName}" label="#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end" show-overflow-tooltip>
  75. <template #default="scope">
  76. <dict-tag :options="$field.fieldDict" :value="scope.row.${field.attrName}"></dict-tag>
  77. </template>
  78. </el-table-column>
  79. #else
  80. <el-table-column prop="${field.attrName}" label="#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end" #if(${field.gridSort} == '1')sortable="custom"#end show-overflow-tooltip/>
  81. #end
  82. #end
  83. <el-table-column label="操作" width="200">
  84. <template #default="scope">
  85. #if($ChildClassName)
  86. <el-button text type="primary" icon="view" v-auth="'sys_role_edit'" @click="formDialogRef.openDialog(scope.row.${pk.attrName}, true)">
  87. 详情
  88. </el-button>
  89. #end
  90. <el-button icon="edit-pen" text type="primary" v-auth="'${moduleName}_${functionName}_edit'"
  91. @click="formDialogRef.openDialog(scope.row.${pk.attrName})">编辑</el-button>
  92. <el-button icon="delete" text type="primary" v-auth="'${moduleName}_${functionName}_del'" @click="handleDelete([scope.row.${pk.attrName}])">
  93. 删除
  94. </el-button>
  95. </template>
  96. </el-table-column>
  97. </el-table>
  98. <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
  99. </div>
  100. <!-- 编辑、新增 -->
  101. <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
  102. </div>
  103. </template>
  104. <script setup lang="ts" name="system${ClassName}">
  105. import { BasicTableProps, useTable } from "/@/hooks/table";
  106. import { fetchList, delObjs } from "/@/api/${moduleName}/${functionName}";
  107. import { useMessage, useMessageBox } from "/@/hooks/message";
  108. import { useDict } from '/@/hooks/dict';
  109. // 引入组件
  110. const FormDialog = defineAsyncComponent(() => import('./form.vue'));
  111. // 定义查询字典
  112. #set($fieldDict=[])
  113. #foreach($field in $queryList)
  114. #if($field.fieldDict)
  115. #set($void=$fieldDict.add($field.fieldDict))
  116. #end
  117. #end
  118. #foreach($field in $gridList)
  119. #if($field.fieldDict)
  120. #set($void=$fieldDict.add($field.fieldDict))
  121. #end
  122. #end
  123. #if($fieldDict)
  124. const { $dict.format($fieldDict) } = useDict($dict.quotation($fieldDict))
  125. #end
  126. // 定义变量内容
  127. const formDialogRef = ref()
  128. // 搜索变量
  129. const queryRef = ref()
  130. const showSearch = ref(true)
  131. // 多选变量
  132. const selectObjs = ref([]) as any
  133. const multiple = ref(true)
  134. const state: BasicTableProps = reactive<BasicTableProps>({
  135. queryForm: {},
  136. pageList: fetchList
  137. })
  138. // table hook
  139. const {
  140. getDataList,
  141. currentChangeHandle,
  142. sizeChangeHandle,
  143. sortChangeHandle,
  144. downBlobFile,
  145. tableStyle
  146. } = useTable(state)
  147. // 清空搜索条件
  148. const resetQuery = () => {
  149. // 清空搜索条件
  150. queryRef.value?.resetFields()
  151. // 清空多选
  152. selectObjs.value = []
  153. getDataList()
  154. }
  155. // 导出excel
  156. const exportExcel = () => {
  157. downBlobFile('/${moduleName}/${functionName}/export', Object.assign(state.queryForm, { ids: selectObjs }), '${functionName}.xlsx')
  158. }
  159. // 多选事件
  160. const selectionChangeHandle = (objs: { $pk.attrName: string }[]) => {
  161. selectObjs.value = objs.map(({ $pk.attrName }) => $pk.attrName);
  162. multiple.value = !objs.length;
  163. };
  164. // 删除操作
  165. const handleDelete = async (ids: string[]) => {
  166. try {
  167. await useMessageBox().confirm('此操作将永久删除');
  168. } catch {
  169. return;
  170. }
  171. try {
  172. await delObjs(ids);
  173. getDataList();
  174. useMessage().success('删除成功');
  175. } catch (err: any) {
  176. useMessage().error(err.msg);
  177. }
  178. };
  179. </script>