index.vue.vm 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
  4. #foreach($column in $columns)
  5. #if($column.query)
  6. #set($dictType=$column.dictType)
  7. #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
  8. #set($parentheseIndex=$column.columnComment.indexOf("("))
  9. #if($parentheseIndex != -1)
  10. #set($comment=$column.columnComment.substring(0, $parentheseIndex))
  11. #else
  12. #set($comment=$column.columnComment)
  13. #end
  14. #if($column.htmlType == "input")
  15. <el-form-item label="${comment}" prop="${column.javaField}">
  16. <el-input
  17. v-model="queryParams.${column.javaField}"
  18. placeholder="请输入${comment}"
  19. clearable
  20. size="small"
  21. @keyup.enter.native="handleQuery"
  22. />
  23. </el-form-item>
  24. #elseif(($column.htmlType == "select" || $column.htmlType == "radio") && "" != $dictType)
  25. <el-form-item label="${comment}" prop="${column.javaField}">
  26. <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable size="small">
  27. <el-option
  28. v-for="dict in ${column.javaField}Options"
  29. :key="dict.dictValue"
  30. :label="dict.dictLabel"
  31. :value="dict.dictValue"
  32. />
  33. </el-select>
  34. </el-form-item>
  35. #elseif(($column.htmlType == "select" || $column.htmlType == "radio") && $dictType)
  36. <el-form-item label="${comment}" prop="${column.javaField}">
  37. <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable size="small">
  38. <el-option label="请选择字典生成" value="" />
  39. </el-select>
  40. </el-form-item>
  41. #elseif($column.htmlType == "datetime")
  42. <el-form-item label="${comment}" prop="${column.javaField}">
  43. <el-date-picker clearable size="small" style="width: 200px"
  44. v-model="queryParams.${column.javaField}"
  45. type="date"
  46. value-format="yyyy-MM-dd"
  47. placeholder="选择${comment}">
  48. </el-date-picker>
  49. </el-form-item>
  50. #end
  51. #end
  52. #end
  53. <el-form-item>
  54. <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  55. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  56. </el-form-item>
  57. </el-form>
  58. <el-row :gutter="10" class="mb8">
  59. <el-col :span="1.5">
  60. <el-button
  61. type="primary"
  62. icon="el-icon-plus"
  63. size="mini"
  64. @click="handleAdd"
  65. v-hasPermi="['${moduleName}:${businessName}:add']"
  66. >新增</el-button>
  67. </el-col>
  68. <el-col :span="1.5">
  69. <el-button
  70. type="success"
  71. icon="el-icon-edit"
  72. size="mini"
  73. :disabled="single"
  74. @click="handleUpdate"
  75. v-hasPermi="['${moduleName}:${businessName}:edit']"
  76. >修改</el-button>
  77. </el-col>
  78. <el-col :span="1.5">
  79. <el-button
  80. type="danger"
  81. icon="el-icon-delete"
  82. size="mini"
  83. :disabled="multiple"
  84. @click="handleDelete"
  85. v-hasPermi="['${moduleName}:${businessName}:remove']"
  86. >删除</el-button>
  87. </el-col>
  88. <el-col :span="1.5">
  89. <el-button
  90. type="warning"
  91. icon="el-icon-download"
  92. size="mini"
  93. @click="handleExport"
  94. v-hasPermi="['${moduleName}:${businessName}:export']"
  95. >导出</el-button>
  96. </el-col>
  97. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  98. </el-row>
  99. <el-table v-loading="loading" :data="${businessName}List" @selection-change="handleSelectionChange">
  100. <el-table-column type="selection" width="55" align="center" />
  101. #foreach($column in $columns)
  102. #set($javaField=$column.javaField)
  103. #set($parentheseIndex=$column.columnComment.indexOf("("))
  104. #if($parentheseIndex != -1)
  105. #set($comment=$column.columnComment.substring(0, $parentheseIndex))
  106. #else
  107. #set($comment=$column.columnComment)
  108. #end
  109. #if($column.pk)
  110. <el-table-column label="${comment}" align="center" prop="${javaField}" />
  111. #elseif($column.list && $column.htmlType == "datetime")
  112. <el-table-column label="${comment}" align="center" prop="${javaField}" width="180">
  113. <template slot-scope="scope">
  114. <span>{{ parseTime(scope.row.${javaField}, '{y}-{m}-{d}') }}</span>
  115. </template>
  116. </el-table-column>
  117. #elseif($column.list && "" != $column.dictType)
  118. <el-table-column label="${comment}" align="center" prop="${javaField}" :formatter="${javaField}Format" />
  119. #elseif($column.list && "" != $javaField)
  120. <el-table-column label="${comment}" align="center" prop="${javaField}" />
  121. #end
  122. #end
  123. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  124. <template slot-scope="scope">
  125. <el-button
  126. size="mini"
  127. type="text"
  128. icon="el-icon-edit"
  129. @click="handleUpdate(scope.row)"
  130. v-hasPermi="['${moduleName}:${businessName}:edit']"
  131. >修改</el-button>
  132. <el-button
  133. size="mini"
  134. type="text"
  135. icon="el-icon-delete"
  136. @click="handleDelete(scope.row)"
  137. v-hasPermi="['${moduleName}:${businessName}:remove']"
  138. >删除</el-button>
  139. </template>
  140. </el-table-column>
  141. </el-table>
  142. <pagination
  143. v-show="total>0"
  144. :total="total"
  145. :page.sync="queryParams.pageNum"
  146. :limit.sync="queryParams.pageSize"
  147. @pagination="getList"
  148. />
  149. <!-- 添加或修改${functionName}对话框 -->
  150. <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  151. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  152. #foreach($column in $columns)
  153. #set($field=$column.javaField)
  154. #if($column.insert && !$column.pk)
  155. #if(($column.usableColumn) || (!$column.superColumn))
  156. #set($parentheseIndex=$column.columnComment.indexOf("("))
  157. #if($parentheseIndex != -1)
  158. #set($comment=$column.columnComment.substring(0, $parentheseIndex))
  159. #else
  160. #set($comment=$column.columnComment)
  161. #end
  162. #set($dictType=$column.dictType)
  163. #if($column.htmlType == "input")
  164. <el-form-item label="${comment}" prop="${field}">
  165. <el-input v-model="form.${field}" placeholder="请输入${comment}" />
  166. </el-form-item>
  167. #elseif($column.htmlType == "editor")
  168. <el-form-item label="${comment}">
  169. <editor v-model="form.${field}" :min-height="192"/>
  170. </el-form-item>
  171. #elseif($column.htmlType == "select" && "" != $dictType)
  172. <el-form-item label="${comment}" prop="${field}">
  173. <el-select v-model="form.${field}" placeholder="请选择${comment}">
  174. <el-option
  175. v-for="dict in ${field}Options"
  176. :key="dict.dictValue"
  177. :label="dict.dictLabel"
  178. #if($column.javaType == "Integer" || $column.javaType == "Long"):value="parseInt(dict.dictValue)"#else:value="dict.dictValue"#end
  179. ></el-option>
  180. </el-select>
  181. </el-form-item>
  182. #elseif($column.htmlType == "select" && $dictType)
  183. <el-form-item label="${comment}" prop="${field}">
  184. <el-select v-model="form.${field}" placeholder="请选择${comment}">
  185. <el-option label="请选择字典生成" value="" />
  186. </el-select>
  187. </el-form-item>
  188. #elseif($column.htmlType == "checkbox" && "" != $dictType)
  189. <el-form-item label="${comment}">
  190. <el-checkbox-group v-model="form.${field}">
  191. <el-checkbox
  192. v-for="dict in ${field}Options"
  193. :key="dict.dictValue"
  194. :label="dict.dictValue">
  195. {{dict.dictLabel}}
  196. </el-checkbox>
  197. </el-checkbox-group>
  198. </el-form-item>
  199. #elseif($column.htmlType == "checkbox" && $dictType)
  200. <el-form-item label="${comment}">
  201. <el-checkbox-group v-model="form.${field}">
  202. <el-checkbox>请选择字典生成</el-checkbox>
  203. </el-checkbox-group>
  204. </el-form-item>
  205. #elseif($column.htmlType == "radio" && "" != $dictType)
  206. <el-form-item label="${comment}">
  207. <el-radio-group v-model="form.${field}">
  208. <el-radio
  209. v-for="dict in ${field}Options"
  210. :key="dict.dictValue"
  211. #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.dictValue)"#else:label="dict.dictValue"#end
  212. >{{dict.dictLabel}}</el-radio>
  213. </el-radio-group>
  214. </el-form-item>
  215. #elseif($column.htmlType == "radio" && $dictType)
  216. <el-form-item label="${comment}">
  217. <el-radio-group v-model="form.${field}">
  218. <el-radio label="1">请选择字典生成</el-radio>
  219. </el-radio-group>
  220. </el-form-item>
  221. #elseif($column.htmlType == "datetime")
  222. <el-form-item label="${comment}" prop="${field}">
  223. <el-date-picker clearable size="small" style="width: 200px"
  224. v-model="form.${field}"
  225. type="date"
  226. value-format="yyyy-MM-dd"
  227. placeholder="选择${comment}">
  228. </el-date-picker>
  229. </el-form-item>
  230. #elseif($column.htmlType == "textarea")
  231. <el-form-item label="${comment}" prop="${field}">
  232. <el-input v-model="form.${field}" type="textarea" placeholder="请输入内容" />
  233. </el-form-item>
  234. #end
  235. #end
  236. #end
  237. #end
  238. </el-form>
  239. <div slot="footer" class="dialog-footer">
  240. <el-button type="primary" @click="submitForm">确 定</el-button>
  241. <el-button @click="cancel">取 消</el-button>
  242. </div>
  243. </el-dialog>
  244. </div>
  245. </template>
  246. <script>
  247. import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${BusinessName}, update${BusinessName}, export${BusinessName} } from "@/api/${moduleName}/${businessName}";
  248. #foreach($column in $columns)
  249. #if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "editor")
  250. import Editor from '@/components/Editor';
  251. #break
  252. #end
  253. #end
  254. export default {
  255. name: "${BusinessName}",
  256. #foreach($column in $columns)
  257. #if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "editor")
  258. components: { Editor },
  259. #break
  260. #end
  261. #end
  262. data() {
  263. return {
  264. // 遮罩层
  265. loading: true,
  266. // 选中数组
  267. ids: [],
  268. // 非单个禁用
  269. single: true,
  270. // 非多个禁用
  271. multiple: true,
  272. // 显示搜索条件
  273. showSearch: true,
  274. // 总条数
  275. total: 0,
  276. // ${functionName}表格数据
  277. ${businessName}List: [],
  278. // 弹出层标题
  279. title: "",
  280. // 是否显示弹出层
  281. open: false,
  282. #foreach ($column in $columns)
  283. #set($parentheseIndex=$column.columnComment.indexOf("("))
  284. #if($parentheseIndex != -1)
  285. #set($comment=$column.columnComment.substring(0, $parentheseIndex))
  286. #else
  287. #set($comment=$column.columnComment)
  288. #end
  289. #if(${column.dictType} != '')
  290. // $comment字典
  291. ${column.javaField}Options: [],
  292. #end
  293. #end
  294. // 查询参数
  295. queryParams: {
  296. pageNum: 1,
  297. pageSize: 10,
  298. #foreach ($column in $columns)
  299. #if($column.query)
  300. $column.javaField: null#if($velocityCount != $columns.size()),#end
  301. #end
  302. #end
  303. },
  304. // 表单参数
  305. form: {},
  306. // 表单校验
  307. rules: {
  308. #foreach ($column in $columns)
  309. #if($column.required)
  310. #set($parentheseIndex=$column.columnComment.indexOf("("))
  311. #if($parentheseIndex != -1)
  312. #set($comment=$column.columnComment.substring(0, $parentheseIndex))
  313. #else
  314. #set($comment=$column.columnComment)
  315. #end
  316. $column.javaField: [
  317. { required: true, message: "$comment不能为空", trigger: #if($column.htmlType == "select")"change"#else"blur"#end }
  318. ]#if($velocityCount != $columns.size()),#end
  319. #end
  320. #end
  321. }
  322. };
  323. },
  324. created() {
  325. this.getList();
  326. #foreach ($column in $columns)
  327. #if(${column.dictType} != '')
  328. this.getDicts("${column.dictType}").then(response => {
  329. this.${column.javaField}Options = response.data;
  330. });
  331. #end
  332. #end
  333. },
  334. methods: {
  335. /** 查询${functionName}列表 */
  336. getList() {
  337. this.loading = true;
  338. list${BusinessName}(this.queryParams).then(response => {
  339. this.${businessName}List = response.rows;
  340. this.total = response.total;
  341. this.loading = false;
  342. });
  343. },
  344. #foreach ($column in $columns)
  345. #if(${column.dictType} != '')
  346. #set($parentheseIndex=$column.columnComment.indexOf("("))
  347. #if($parentheseIndex != -1)
  348. #set($comment=$column.columnComment.substring(0, $parentheseIndex))
  349. #else
  350. #set($comment=$column.columnComment)
  351. #end
  352. // $comment字典翻译
  353. ${column.javaField}Format(row, column) {
  354. return this.selectDictLabel#if($column.htmlType == "checkbox")s#end(this.${column.javaField}Options, row.${column.javaField});
  355. },
  356. #end
  357. #end
  358. // 取消按钮
  359. cancel() {
  360. this.open = false;
  361. this.reset();
  362. },
  363. // 表单重置
  364. reset() {
  365. this.form = {
  366. #foreach ($column in $columns)
  367. #if($column.htmlType == "radio")
  368. $column.javaField: #if($column.javaType == "Integer" || $column.javaType == "Long")0#else"0"#end#if($velocityCount != $columns.size()),#end
  369. #elseif($column.htmlType == "checkbox")
  370. $column.javaField: []#if($velocityCount != $columns.size()),#end
  371. #else
  372. $column.javaField: null#if($velocityCount != $columns.size()),#end
  373. #end
  374. #end
  375. };
  376. this.resetForm("form");
  377. },
  378. /** 搜索按钮操作 */
  379. handleQuery() {
  380. this.queryParams.pageNum = 1;
  381. this.getList();
  382. },
  383. /** 重置按钮操作 */
  384. resetQuery() {
  385. this.resetForm("queryForm");
  386. this.handleQuery();
  387. },
  388. // 多选框选中数据
  389. handleSelectionChange(selection) {
  390. this.ids = selection.map(item => item.${pkColumn.javaField})
  391. this.single = selection.length!==1
  392. this.multiple = !selection.length
  393. },
  394. /** 新增按钮操作 */
  395. handleAdd() {
  396. this.reset();
  397. this.open = true;
  398. this.title = "添加${functionName}";
  399. },
  400. /** 修改按钮操作 */
  401. handleUpdate(row) {
  402. this.reset();
  403. const ${pkColumn.javaField} = row.${pkColumn.javaField} || this.ids
  404. get${BusinessName}(${pkColumn.javaField}).then(response => {
  405. this.form = response.data;
  406. #foreach ($column in $columns)
  407. #if($column.htmlType == "checkbox")
  408. this.form.$column.javaField = this.form.${column.javaField}.split(",");
  409. #end
  410. #end
  411. this.open = true;
  412. this.title = "修改${functionName}";
  413. });
  414. },
  415. /** 提交按钮 */
  416. submitForm() {
  417. this.#[[$]]#refs["form"].validate(valid => {
  418. if (valid) {
  419. #foreach ($column in $columns)
  420. #if($column.htmlType == "checkbox")
  421. this.form.$column.javaField = this.form.${column.javaField}.join(",");
  422. #end
  423. #end
  424. if (this.form.${pkColumn.javaField} != null) {
  425. update${BusinessName}(this.form).then(response => {
  426. this.msgSuccess("修改成功");
  427. this.open = false;
  428. this.getList();
  429. });
  430. } else {
  431. add${BusinessName}(this.form).then(response => {
  432. this.msgSuccess("新增成功");
  433. this.open = false;
  434. this.getList();
  435. });
  436. }
  437. }
  438. });
  439. },
  440. /** 删除按钮操作 */
  441. handleDelete(row) {
  442. const ${pkColumn.javaField}s = row.${pkColumn.javaField} || this.ids;
  443. this.$confirm('是否确认删除${functionName}编号为"' + ${pkColumn.javaField}s + '"的数据项?', "警告", {
  444. confirmButtonText: "确定",
  445. cancelButtonText: "取消",
  446. type: "warning"
  447. }).then(function() {
  448. return del${BusinessName}(${pkColumn.javaField}s);
  449. }).then(() => {
  450. this.getList();
  451. this.msgSuccess("删除成功");
  452. })
  453. },
  454. /** 导出按钮操作 */
  455. handleExport() {
  456. const queryParams = this.queryParams;
  457. this.$confirm('是否确认导出所有${functionName}数据项?', "警告", {
  458. confirmButtonText: "确定",
  459. cancelButtonText: "取消",
  460. type: "warning"
  461. }).then(function() {
  462. return export${BusinessName}(queryParams);
  463. }).then(response => {
  464. this.download(response.msg);
  465. })
  466. }
  467. }
  468. };
  469. </script>