index.vue.vm 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597
  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" && $column.queryType != "BETWEEN")
  42. <el-form-item label="${comment}" prop="${column.javaField}">
  43. <el-date-picker clearable size="small"
  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. #elseif($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
  51. <el-form-item label="${comment}">
  52. <el-date-picker
  53. v-model="daterange${AttrName}"
  54. size="small"
  55. style="width: 240px"
  56. value-format="yyyy-MM-dd"
  57. type="daterange"
  58. range-separator="-"
  59. start-placeholder="开始日期"
  60. end-placeholder="结束日期"
  61. ></el-date-picker>
  62. </el-form-item>
  63. #end
  64. #end
  65. #end
  66. <el-form-item>
  67. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  68. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  69. </el-form-item>
  70. </el-form>
  71. <el-row :gutter="10" class="mb8">
  72. <el-col :span="1.5">
  73. <el-button
  74. type="primary"
  75. plain
  76. icon="el-icon-plus"
  77. size="mini"
  78. @click="handleAdd"
  79. v-hasPermi="['${moduleName}:${businessName}:add']"
  80. >新增</el-button>
  81. </el-col>
  82. <el-col :span="1.5">
  83. <el-button
  84. type="success"
  85. plain
  86. icon="el-icon-edit"
  87. size="mini"
  88. :disabled="single"
  89. @click="handleUpdate"
  90. v-hasPermi="['${moduleName}:${businessName}:edit']"
  91. >修改</el-button>
  92. </el-col>
  93. <el-col :span="1.5">
  94. <el-button
  95. type="danger"
  96. plain
  97. icon="el-icon-delete"
  98. size="mini"
  99. :disabled="multiple"
  100. @click="handleDelete"
  101. v-hasPermi="['${moduleName}:${businessName}:remove']"
  102. >删除</el-button>
  103. </el-col>
  104. <el-col :span="1.5">
  105. <el-button
  106. type="warning"
  107. plain
  108. icon="el-icon-download"
  109. size="mini"
  110. :loading="exportLoading"
  111. @click="handleExport"
  112. v-hasPermi="['${moduleName}:${businessName}:export']"
  113. >导出</el-button>
  114. </el-col>
  115. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  116. </el-row>
  117. <el-table v-loading="loading" :data="${businessName}List" @selection-change="handleSelectionChange">
  118. <el-table-column type="selection" width="55" align="center" />
  119. #foreach($column in $columns)
  120. #set($javaField=$column.javaField)
  121. #set($parentheseIndex=$column.columnComment.indexOf("("))
  122. #if($parentheseIndex != -1)
  123. #set($comment=$column.columnComment.substring(0, $parentheseIndex))
  124. #else
  125. #set($comment=$column.columnComment)
  126. #end
  127. #if($column.pk)
  128. <el-table-column label="${comment}" align="center" prop="${javaField}" />
  129. #elseif($column.list && $column.htmlType == "datetime")
  130. <el-table-column label="${comment}" align="center" prop="${javaField}" width="180">
  131. <template slot-scope="scope">
  132. <span>{{ parseTime(scope.row.${javaField}, '{y}-{m}-{d}') }}</span>
  133. </template>
  134. </el-table-column>
  135. #elseif($column.list && "" != $column.dictType)
  136. <el-table-column label="${comment}" align="center" prop="${javaField}">
  137. <template slot-scope="scope">
  138. <dict-tag :options="${javaField}Options" :value="scope.row.${javaField}"/>
  139. </template>
  140. </el-table-column>
  141. #elseif($column.list && "" != $javaField)
  142. <el-table-column label="${comment}" align="center" prop="${javaField}" />
  143. #end
  144. #end
  145. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  146. <template slot-scope="scope">
  147. <el-button
  148. size="mini"
  149. type="text"
  150. icon="el-icon-edit"
  151. @click="handleUpdate(scope.row)"
  152. v-hasPermi="['${moduleName}:${businessName}:edit']"
  153. >修改</el-button>
  154. <el-button
  155. size="mini"
  156. type="text"
  157. icon="el-icon-delete"
  158. @click="handleDelete(scope.row)"
  159. v-hasPermi="['${moduleName}:${businessName}:remove']"
  160. >删除</el-button>
  161. </template>
  162. </el-table-column>
  163. </el-table>
  164. <pagination
  165. v-show="total>0"
  166. :total="total"
  167. :page.sync="queryParams.pageNum"
  168. :limit.sync="queryParams.pageSize"
  169. @pagination="getList"
  170. />
  171. <!-- 添加或修改${functionName}对话框 -->
  172. <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  173. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  174. #foreach($column in $columns)
  175. #set($field=$column.javaField)
  176. #if($column.insert && !$column.pk)
  177. #if(($column.usableColumn) || (!$column.superColumn))
  178. #set($parentheseIndex=$column.columnComment.indexOf("("))
  179. #if($parentheseIndex != -1)
  180. #set($comment=$column.columnComment.substring(0, $parentheseIndex))
  181. #else
  182. #set($comment=$column.columnComment)
  183. #end
  184. #set($dictType=$column.dictType)
  185. #if($column.htmlType == "input")
  186. <el-form-item label="${comment}" prop="${field}">
  187. <el-input v-model="form.${field}" placeholder="请输入${comment}" />
  188. </el-form-item>
  189. #elseif($column.htmlType == "imageUpload")
  190. <el-form-item label="${comment}">
  191. <imageUpload v-model="form.${field}"/>
  192. </el-form-item>
  193. #elseif($column.htmlType == "fileUpload")
  194. <el-form-item label="${comment}">
  195. <fileUpload v-model="form.${field}"/>
  196. </el-form-item>
  197. #elseif($column.htmlType == "editor")
  198. <el-form-item label="${comment}">
  199. <editor v-model="form.${field}" :min-height="192"/>
  200. </el-form-item>
  201. #elseif($column.htmlType == "select" && "" != $dictType)
  202. <el-form-item label="${comment}" prop="${field}">
  203. <el-select v-model="form.${field}" placeholder="请选择${comment}">
  204. <el-option
  205. v-for="dict in ${field}Options"
  206. :key="dict.dictValue"
  207. :label="dict.dictLabel"
  208. #if($column.javaType == "Integer" || $column.javaType == "Long"):value="parseInt(dict.dictValue)"#else:value="dict.dictValue"#end
  209. ></el-option>
  210. </el-select>
  211. </el-form-item>
  212. #elseif($column.htmlType == "select" && $dictType)
  213. <el-form-item label="${comment}" prop="${field}">
  214. <el-select v-model="form.${field}" placeholder="请选择${comment}">
  215. <el-option label="请选择字典生成" value="" />
  216. </el-select>
  217. </el-form-item>
  218. #elseif($column.htmlType == "checkbox" && "" != $dictType)
  219. <el-form-item label="${comment}">
  220. <el-checkbox-group v-model="form.${field}">
  221. <el-checkbox
  222. v-for="dict in ${field}Options"
  223. :key="dict.dictValue"
  224. :label="dict.dictValue">
  225. {{dict.dictLabel}}
  226. </el-checkbox>
  227. </el-checkbox-group>
  228. </el-form-item>
  229. #elseif($column.htmlType == "checkbox" && $dictType)
  230. <el-form-item label="${comment}">
  231. <el-checkbox-group v-model="form.${field}">
  232. <el-checkbox>请选择字典生成</el-checkbox>
  233. </el-checkbox-group>
  234. </el-form-item>
  235. #elseif($column.htmlType == "radio" && "" != $dictType)
  236. <el-form-item label="${comment}">
  237. <el-radio-group v-model="form.${field}">
  238. <el-radio
  239. v-for="dict in ${field}Options"
  240. :key="dict.dictValue"
  241. #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.dictValue)"#else:label="dict.dictValue"#end
  242. >{{dict.dictLabel}}</el-radio>
  243. </el-radio-group>
  244. </el-form-item>
  245. #elseif($column.htmlType == "radio" && $dictType)
  246. <el-form-item label="${comment}">
  247. <el-radio-group v-model="form.${field}">
  248. <el-radio label="1">请选择字典生成</el-radio>
  249. </el-radio-group>
  250. </el-form-item>
  251. #elseif($column.htmlType == "datetime")
  252. <el-form-item label="${comment}" prop="${field}">
  253. <el-date-picker clearable size="small"
  254. v-model="form.${field}"
  255. type="date"
  256. value-format="yyyy-MM-dd"
  257. placeholder="选择${comment}">
  258. </el-date-picker>
  259. </el-form-item>
  260. #elseif($column.htmlType == "textarea")
  261. <el-form-item label="${comment}" prop="${field}">
  262. <el-input v-model="form.${field}" type="textarea" placeholder="请输入内容" />
  263. </el-form-item>
  264. #end
  265. #end
  266. #end
  267. #end
  268. #if($table.sub)
  269. <el-divider content-position="center">${subTable.functionName}信息</el-divider>
  270. <el-row :gutter="10" class="mb8">
  271. <el-col :span="1.5">
  272. <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd${subClassName}">添加</el-button>
  273. </el-col>
  274. <el-col :span="1.5">
  275. <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete${subClassName}">删除</el-button>
  276. </el-col>
  277. </el-row>
  278. <el-table :data="${subclassName}List" :row-class-name="row${subClassName}Index" @selection-change="handle${subClassName}SelectionChange" ref="${subclassName}">
  279. <el-table-column type="selection" width="50" align="center" />
  280. <el-table-column label="序号" align="center" prop="index" width="50"/>
  281. #foreach($column in $subTable.columns)
  282. #set($javaField=$column.javaField)
  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.pk || $javaField == ${subTableFkclassName})
  290. #elseif($column.list && "" != $javaField)
  291. <el-table-column label="$comment" prop="${javaField}">
  292. <template slot-scope="scope">
  293. <el-input v-model="scope.row.$javaField" placeholder="请输入$comment" />
  294. </template>
  295. </el-table-column>
  296. #end
  297. #end
  298. </el-table>
  299. #end
  300. </el-form>
  301. <div slot="footer" class="dialog-footer">
  302. <el-button type="primary" @click="submitForm">确 定</el-button>
  303. <el-button @click="cancel">取 消</el-button>
  304. </div>
  305. </el-dialog>
  306. </div>
  307. </template>
  308. <script>
  309. import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${BusinessName}, update${BusinessName}, export${BusinessName} } from "@/api/${moduleName}/${businessName}";
  310. export default {
  311. name: "${BusinessName}",
  312. data() {
  313. return {
  314. // 遮罩层
  315. loading: true,
  316. // 导出遮罩层
  317. exportLoading: false,
  318. // 选中数组
  319. ids: [],
  320. #if($table.sub)
  321. // 子表选中数据
  322. checked${subClassName}: [],
  323. #end
  324. // 非单个禁用
  325. single: true,
  326. // 非多个禁用
  327. multiple: true,
  328. // 显示搜索条件
  329. showSearch: true,
  330. // 总条数
  331. total: 0,
  332. // ${functionName}表格数据
  333. ${businessName}List: [],
  334. #if($table.sub)
  335. // ${subTable.functionName}表格数据
  336. ${subclassName}List: [],
  337. #end
  338. // 弹出层标题
  339. title: "",
  340. // 是否显示弹出层
  341. open: false,
  342. #foreach ($column in $columns)
  343. #set($parentheseIndex=$column.columnComment.indexOf("("))
  344. #if($parentheseIndex != -1)
  345. #set($comment=$column.columnComment.substring(0, $parentheseIndex))
  346. #else
  347. #set($comment=$column.columnComment)
  348. #end
  349. #if(${column.dictType} != '')
  350. // $comment字典
  351. ${column.javaField}Options: [],
  352. #elseif($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
  353. #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
  354. // $comment时间范围
  355. daterange${AttrName}: [],
  356. #end
  357. #end
  358. // 查询参数
  359. queryParams: {
  360. pageNum: 1,
  361. pageSize: 10,
  362. #foreach ($column in $columns)
  363. #if($column.query)
  364. $column.javaField: null#if($velocityCount != $columns.size()),#end
  365. #end
  366. #end
  367. },
  368. // 表单参数
  369. form: {},
  370. // 表单校验
  371. rules: {
  372. #foreach ($column in $columns)
  373. #if($column.required)
  374. #set($parentheseIndex=$column.columnComment.indexOf("("))
  375. #if($parentheseIndex != -1)
  376. #set($comment=$column.columnComment.substring(0, $parentheseIndex))
  377. #else
  378. #set($comment=$column.columnComment)
  379. #end
  380. $column.javaField: [
  381. { required: true, message: "$comment不能为空", trigger: #if($column.htmlType == "select")"change"#else"blur"#end }
  382. ]#if($velocityCount != $columns.size()),#end
  383. #end
  384. #end
  385. }
  386. };
  387. },
  388. created() {
  389. this.getList();
  390. #foreach ($column in $columns)
  391. #if(${column.dictType} != '')
  392. this.getDicts("${column.dictType}").then(response => {
  393. this.${column.javaField}Options = response.data;
  394. });
  395. #end
  396. #end
  397. },
  398. methods: {
  399. /** 查询${functionName}列表 */
  400. getList() {
  401. this.loading = true;
  402. #foreach ($column in $columns)
  403. #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
  404. this.queryParams.params = {};
  405. #break
  406. #end
  407. #end
  408. #foreach ($column in $columns)
  409. #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
  410. #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
  411. if (null != this.daterange${AttrName} && '' != this.daterange${AttrName}) {
  412. this.queryParams.params["begin${AttrName}"] = this.daterange${AttrName}[0];
  413. this.queryParams.params["end${AttrName}"] = this.daterange${AttrName}[1];
  414. }
  415. #end
  416. #end
  417. list${BusinessName}(this.queryParams).then(response => {
  418. this.${businessName}List = response.rows;
  419. this.total = response.total;
  420. this.loading = false;
  421. });
  422. },
  423. // 取消按钮
  424. cancel() {
  425. this.open = false;
  426. this.reset();
  427. },
  428. // 表单重置
  429. reset() {
  430. this.form = {
  431. #foreach ($column in $columns)
  432. #if($column.htmlType == "radio")
  433. $column.javaField: #if($column.javaType == "Integer" || $column.javaType == "Long")0#else"0"#end#if($velocityCount != $columns.size()),#end
  434. #elseif($column.htmlType == "checkbox")
  435. $column.javaField: []#if($velocityCount != $columns.size()),#end
  436. #else
  437. $column.javaField: null#if($velocityCount != $columns.size()),#end
  438. #end
  439. #end
  440. };
  441. #if($table.sub)
  442. this.${subclassName}List = [];
  443. #end
  444. this.resetForm("form");
  445. },
  446. /** 搜索按钮操作 */
  447. handleQuery() {
  448. this.queryParams.pageNum = 1;
  449. this.getList();
  450. },
  451. /** 重置按钮操作 */
  452. resetQuery() {
  453. #foreach ($column in $columns)
  454. #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
  455. #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
  456. this.daterange${AttrName} = [];
  457. #end
  458. #end
  459. this.resetForm("queryForm");
  460. this.handleQuery();
  461. },
  462. // 多选框选中数据
  463. handleSelectionChange(selection) {
  464. this.ids = selection.map(item => item.${pkColumn.javaField})
  465. this.single = selection.length!==1
  466. this.multiple = !selection.length
  467. },
  468. /** 新增按钮操作 */
  469. handleAdd() {
  470. this.reset();
  471. this.open = true;
  472. this.title = "添加${functionName}";
  473. },
  474. /** 修改按钮操作 */
  475. handleUpdate(row) {
  476. this.reset();
  477. const ${pkColumn.javaField} = row.${pkColumn.javaField} || this.ids
  478. get${BusinessName}(${pkColumn.javaField}).then(response => {
  479. this.form = response.data;
  480. #foreach ($column in $columns)
  481. #if($column.htmlType == "checkbox")
  482. this.form.$column.javaField = this.form.${column.javaField}.split(",");
  483. #end
  484. #end
  485. #if($table.sub)
  486. this.${subclassName}List = response.data.${subclassName}List;
  487. #end
  488. this.open = true;
  489. this.title = "修改${functionName}";
  490. });
  491. },
  492. /** 提交按钮 */
  493. submitForm() {
  494. this.#[[$]]#refs["form"].validate(valid => {
  495. if (valid) {
  496. #foreach ($column in $columns)
  497. #if($column.htmlType == "checkbox")
  498. this.form.$column.javaField = this.form.${column.javaField}.join(",");
  499. #end
  500. #end
  501. #if($table.sub)
  502. this.form.${subclassName}List = this.${subclassName}List;
  503. #end
  504. if (this.form.${pkColumn.javaField} != null) {
  505. update${BusinessName}(this.form).then(response => {
  506. this.msgSuccess("修改成功");
  507. this.open = false;
  508. this.getList();
  509. });
  510. } else {
  511. add${BusinessName}(this.form).then(response => {
  512. this.msgSuccess("新增成功");
  513. this.open = false;
  514. this.getList();
  515. });
  516. }
  517. }
  518. });
  519. },
  520. /** 删除按钮操作 */
  521. handleDelete(row) {
  522. const ${pkColumn.javaField}s = row.${pkColumn.javaField} || this.ids;
  523. this.$confirm('是否确认删除${functionName}编号为"' + ${pkColumn.javaField}s + '"的数据项?', "警告", {
  524. confirmButtonText: "确定",
  525. cancelButtonText: "取消",
  526. type: "warning"
  527. }).then(function() {
  528. return del${BusinessName}(${pkColumn.javaField}s);
  529. }).then(() => {
  530. this.getList();
  531. this.msgSuccess("删除成功");
  532. }).catch(() => {});
  533. },
  534. #if($table.sub)
  535. /** ${subTable.functionName}序号 */
  536. row${subClassName}Index({ row, rowIndex }) {
  537. row.index = rowIndex + 1;
  538. },
  539. /** ${subTable.functionName}添加按钮操作 */
  540. handleAdd${subClassName}() {
  541. let obj = {};
  542. #foreach($column in $subTable.columns)
  543. #if($column.pk || $column.javaField == ${subTableFkclassName})
  544. #elseif($column.list && "" != $javaField)
  545. obj.$column.javaField = "";
  546. #end
  547. #end
  548. this.${subclassName}List.push(obj);
  549. },
  550. /** ${subTable.functionName}删除按钮操作 */
  551. handleDelete${subClassName}() {
  552. if (this.checked${subClassName}.length == 0) {
  553. this.msgError("请先选择要删除的${subTable.functionName}数据");
  554. } else {
  555. const ${subclassName}List = this.${subclassName}List;
  556. const checked${subClassName} = this.checked${subClassName};
  557. this.${subclassName}List = ${subclassName}List.filter(function(item) {
  558. return checked${subClassName}.indexOf(item.index) == -1
  559. });
  560. }
  561. },
  562. /** 复选框选中数据 */
  563. handle${subClassName}SelectionChange(selection) {
  564. this.checked${subClassName} = selection.map(item => item.index)
  565. },
  566. #end
  567. /** 导出按钮操作 */
  568. handleExport() {
  569. const queryParams = this.queryParams;
  570. this.$confirm('是否确认导出所有${functionName}数据项?', "警告", {
  571. confirmButtonText: "确定",
  572. cancelButtonText: "取消",
  573. type: "warning"
  574. }).then(() => {
  575. this.exportLoading = true;
  576. return export${BusinessName}(queryParams);
  577. }).then(response => {
  578. this.download(response.msg);
  579. this.exportLoading = false;
  580. }).catch(() => {});
  581. }
  582. }
  583. };
  584. </script>