list-vue.template 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658
  1. <template>
  2. {{$lens := .table.Columns|len}}
  3. {{$businessName := .table.BusinessName | CaseCamelLower}}
  4. <div class="app-container">
  5. <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
  6. {{range $index, $column := .table.Columns}}
  7. {{if and (eq $column.IsQuery "1") (ne $column.ColumnName "created_by") (ne $column.ColumnName "updated_by") (ne $column.ColumnName "created_at") (ne $column.ColumnName "updated_at") (ne $column.ColumnName "deleted_at")}}
  8. {{if eq $column.HtmlType "input"}}
  9. <el-form-item label="{{$column.ColumnComment}}" prop="{{$column.HtmlField}}">
  10. <el-input
  11. v-model="queryParams.{{$column.HtmlField}}"
  12. placeholder="请输入{{$column.ColumnComment}}"
  13. clearable
  14. size="small"
  15. @keyup.enter.native="handleQuery"
  16. />
  17. </el-form-item>
  18. {{else if and (eq $column.HtmlType "select" "radio" "checkbox") (ne $column.DictType "") }}
  19. <el-form-item label="{{$column.ColumnComment}}" prop="{{$column.HtmlField}}">
  20. <el-select v-model="queryParams.{{$column.HtmlField}}" placeholder="请选择{{$column.ColumnComment}}" clearable size="small">
  21. <el-option
  22. v-for="dict in {{$column.HtmlField}}Options"
  23. :key="dict.key"
  24. :label="dict.value"
  25. :value="dict.key"
  26. />
  27. </el-select>
  28. </el-form-item>
  29. {{else if eq $column.HtmlType "datetime"}}
  30. <el-form-item label="{{$column.ColumnComment}}" prop="{{$column.HtmlField}}">
  31. <el-date-picker
  32. clearable size="small" style="width: 200px"
  33. v-model="queryParams.{{$column.HtmlField}}"
  34. type="date"
  35. value-format="yyyy-MM-dd"
  36. placeholder="选择{{$column.ColumnComment}}">
  37. </el-date-picker>
  38. </el-form-item>
  39. {{else if and (eq $column.HtmlType "select" "radio" "checkbox") (ne $column.LinkTableName "")}}
  40. <el-form-item label="{{$column.ColumnComment}}" prop="{{$column.HtmlField}}">
  41. <el-select v-model="queryParams.{{$column.HtmlField}}" placeholder="请选择{{$column.ColumnComment}}" clearable size="small">
  42. <el-option
  43. v-for="item in {{$column.HtmlField}}Options"
  44. :key="item.key"
  45. :label="item.value"
  46. :value="item.key"
  47. />
  48. </el-select>
  49. </el-form-item>
  50. {{else}}
  51. <el-form-item label="{{$column.ColumnComment}}" prop="{{$column.HtmlField}}">
  52. <el-select v-model="queryParams.{{$column.HtmlField}}" placeholder="请选择{{$column.ColumnComment}}" clearable size="small">
  53. <el-option label="请选择字典生成" value="" />
  54. </el-select>
  55. </el-form-item>
  56. {{end}}
  57. {{end}}
  58. {{end}}
  59. <el-form-item>
  60. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  61. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  62. </el-form-item>
  63. </el-form>
  64. <el-row :gutter="10" class="mb8">
  65. <el-col :span="1.5">
  66. <el-button
  67. type="primary"
  68. icon="el-icon-plus"
  69. size="mini"
  70. @click="handleAdd"
  71. v-hasPermi="['{{.table.ModuleName}}/{{$businessName}}/add']"
  72. >新增</el-button>
  73. </el-col>
  74. <el-col :span="1.5">
  75. <el-button
  76. type="success"
  77. icon="el-icon-edit"
  78. size="mini"
  79. :disabled="single"
  80. @click="handleUpdate"
  81. v-hasPermi="['{{.table.ModuleName}}/{{$businessName}}/edit']"
  82. >修改</el-button>
  83. </el-col>
  84. <el-col :span="1.5">
  85. <el-button
  86. type="danger"
  87. icon="el-icon-delete"
  88. size="mini"
  89. :disabled="multiple"
  90. @click="handleDelete"
  91. v-hasPermi="['{{.table.ModuleName}}/{{$businessName}}/delete']"
  92. >删除</el-button>
  93. </el-col>
  94. </el-row>
  95. <el-table v-loading="loading" :data="{{$businessName}}List" @selection-change="handleSelectionChange">
  96. <el-table-column type="selection" width="55" align="center" />
  97. {{range $index, $column := .table.Columns}}
  98. {{if eq $column.IsPk "1"}}
  99. <el-table-column label="{{$column.ColumnComment}}" align="center" prop="{{$column.HtmlField}}" />
  100. {{else if and (eq $column.IsList "1") (eq $column.HtmlType "datetime")}}
  101. <el-table-column label="{{$column.ColumnComment}}" align="center" prop="{{$column.HtmlField}}" width="180">
  102. <template slot-scope="scope">
  103. <span>{{VueTag "{{"}} parseTime(scope.row.{{$column.HtmlField}}, '{y}-{m}-{d}') {{VueTag "}}"}}</span>
  104. </template>
  105. </el-table-column>
  106. {{else if and (eq $column.IsList "1") (eq $column.HtmlType "imagefile")}}
  107. <el-table-column align="center" label="缩略图" width="100">
  108. <template slot-scope="scope">
  109. <img v-if="scope.row.{{$column.HtmlField}}!=''" :src="scope.row.{{$column.HtmlField}}|urlCorrection"
  110. style="width: 150px; "
  111. >
  112. </template>
  113. </el-table-column>
  114. {{else if and (eq $column.IsList "1") (HasSuffix $column.ColumnName "status")}}
  115. <el-table-column label="{{$column.ColumnComment}}" align="center">
  116. <template slot-scope="scope">
  117. <el-switch
  118. v-model="scope.row.{{$column.HtmlField}}"
  119. :active-value="1"
  120. :inactive-value="0"
  121. @change="{{$column.HtmlField}}Change(scope.row)"
  122. ></el-switch>
  123. </template>
  124. </el-table-column>
  125. {{else if ne $column.LinkTableName ""}}
  126. <el-table-column label="{{$column.ColumnComment}}" align="center" prop="{{$column.HtmlField}}" :formatter="{{$column.HtmlField}}Format" width="100">
  127. <template slot-scope="scope">
  128. {{VueTag "{{" }} {{$column.HtmlField}}Format(scope.row) {{VueTag "}}" }}
  129. </template>
  130. </el-table-column>
  131. {{else if and (eq $column.IsList "1") (ne $column.DictType "")}}
  132. <el-table-column label="{{$column.ColumnComment}}" align="center" prop="{{$column.HtmlField}}" :formatter="{{$column.HtmlField}}Format" />
  133. {{else if and (eq $column.IsList "1") (ne $column.HtmlField "")}}
  134. <el-table-column label="{{$column.ColumnComment}}" align="center" prop="{{$column.HtmlField}}" />
  135. {{end}}{{end}}
  136. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  137. <template slot-scope="scope">
  138. <el-button
  139. size="mini"
  140. type="text"
  141. icon="el-icon-edit"
  142. @click="handleUpdate(scope.row)"
  143. v-hasPermi="['{{.table.ModuleName}}/{{$businessName}}/edit']"
  144. >修改</el-button>
  145. <el-button
  146. size="mini"
  147. type="text"
  148. icon="el-icon-delete"
  149. @click="handleDelete(scope.row)"
  150. v-hasPermi="['{{.table.ModuleName}}/{{$businessName}}/delete']"
  151. >删除</el-button>
  152. </template>
  153. </el-table-column>
  154. </el-table>
  155. <pagination
  156. v-show="total>0"
  157. :total="total"
  158. :page.sync="queryParams.pageNum"
  159. :limit.sync="queryParams.pageSize"
  160. @pagination="getList"
  161. />
  162. <!-- 添加或修改{{.table.FunctionName}}对话框 -->
  163. <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :close-on-click-modal="false">
  164. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  165. {{range $index, $column := .table.Columns}}
  166. {{if and (eq $column.IsInsert "1") (ne $column.IsPk "1")}}
  167. {{if eq $column.HtmlType "input"}}
  168. <el-form-item label="{{$column.ColumnComment}}" prop="{{$column.HtmlField}}">
  169. <el-input v-model="form.{{$column.HtmlField}}" placeholder="请输入{{$column.ColumnComment}}" />
  170. </el-form-item>
  171. {{else if eq $column.HtmlType "select" }}
  172. {{if ne $column.LinkTableName ""}}
  173. <el-form-item label="{{$column.ColumnComment}}" prop="{{$column.HtmlField}}">
  174. <el-select v-model="form.{{$column.HtmlField}}" placeholder="请选择{{$column.ColumnComment}}">
  175. <el-option
  176. v-for="item in {{$column.HtmlField}}Options"
  177. :key="item.key"
  178. :label="item.value"
  179. :value="item.key"
  180. ></el-option>
  181. </el-select>
  182. </el-form-item>
  183. {{else if ne $column.DictType ""}}
  184. <el-form-item label="{{$column.ColumnComment}}" prop="{{$column.HtmlField}}">
  185. <el-select v-model="form.{{$column.HtmlField}}" placeholder="请选择{{$column.ColumnComment}}">
  186. <el-option
  187. v-for="dict in {{$column.HtmlField}}Options"
  188. :key="dict.key"
  189. :label="dict.value"
  190. {{if eq $column.GoType "Integer"}}
  191. :value="parseInt(dict.key)"
  192. {{else}}
  193. :value="dict.key"
  194. {{end}}
  195. ></el-option>
  196. </el-select>
  197. </el-form-item>
  198. {{else}}
  199. <el-form-item label="{{$column.ColumnComment}}" prop="{{$column.HtmlField}}">
  200. <el-select v-model="form.{{$column.HtmlField}}" placeholder="请选择{{$column.ColumnComment}}">
  201. <el-option label="请选择字典生成" value="" />
  202. </el-select>
  203. </el-form-item>
  204. {{end}}
  205. {{else if eq $column.HtmlType "radio" }}
  206. {{if ne $column.DictType ""}}
  207. <el-form-item label="{{$column.ColumnComment}}" prop="{{$column.HtmlField}}">
  208. <el-radio-group v-model="form.{{$column.HtmlField}}">
  209. <el-radio
  210. v-for="dict in {{$column.HtmlField}}Options"
  211. :key="dict.key"
  212. :label="dict.key"
  213. >{{ VueTag "{{" }}dict.value {{VueTag "}}"}}</el-radio>
  214. </el-radio-group>
  215. </el-form-item>
  216. {{else}}
  217. <el-form-item label="{{$column.ColumnComment}}" prop="{{$column.HtmlField}}">
  218. <el-radio-group v-model="form.{{$column.HtmlField}}">
  219. <el-radio label="1">请选择字典生成</el-radio>
  220. </el-radio-group>
  221. </el-form-item>
  222. {{end}}
  223. {{else if eq $column.HtmlType "datetime"}}
  224. <el-form-item label="{{$column.ColumnComment}}" prop="{{$column.HtmlField}}">
  225. <el-date-picker clearable size="small" style="width: 200px"
  226. v-model="form.{{$column.HtmlField}}"
  227. type="date"
  228. value-format="yyyy-MM-dd"
  229. placeholder="选择{{$column.ColumnComment}}">
  230. </el-date-picker>
  231. </el-form-item>
  232. {{else if eq $column.HtmlType "textarea"}}
  233. <el-form-item label="{{$column.ColumnComment}}" prop="{{$column.HtmlField}}">
  234. <el-input v-model="form.{{$column.HtmlField}}" type="textarea" placeholder="请输入{{$column.ColumnComment}}" />
  235. </el-form-item>
  236. {{else if eq $column.HtmlType "checkbox" }}
  237. <el-form-item label="{{$column.ColumnComment}}" prop="{{$column.HtmlField}}">
  238. <el-checkbox-group v-model="form.{{$column.HtmlField}}">
  239. <el-checkbox
  240. v-for="dict in {{$column.HtmlField}}Options"
  241. :key="dict.key"
  242. :label="dict.key"
  243. >{{ VueTag "{{" }}dict.value {{VueTag "}}"}}</el-checkbox>
  244. </el-checkbox-group>
  245. </el-form-item>
  246. {{else if eq $column.HtmlType "richtext"}}
  247. <el-form-item label="{{$column.ColumnComment}}">
  248. <Editor ref="cke" v-model="form.{{$column.HtmlField}}" @setEditContent="set{{$column.GoField}}EditContent"/>
  249. </el-form-item>
  250. {{else if eq $column.HtmlType "imagefile"}}
  251. <el-form-item label="{{$column.ColumnComment}}" prop="{{$column.HtmlField}}">
  252. <el-upload
  253. v-loading="upLoading{{$column.GoField}}"
  254. :action="apiUrl+'/system/upload/upImg'"
  255. :before-upload="beforeAvatarUpload{{$column.GoField}}"
  256. :data="setUpData()"
  257. :on-success="handleAvatarSuccess{{$column.GoField}}"
  258. :show-file-list="false"
  259. class="avatar-uploader"
  260. name="file"
  261. >
  262. <img v-if="imageUrl{{$column.GoField}}" :src="imageUrl{{$column.GoField}}" class="avatar">
  263. <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  264. </el-upload>
  265. </el-form-item>
  266. {{else if eq $column.HtmlType "images"}}
  267. <el-form-item label="{{$column.ColumnComment}}" prop="{{$column.HtmlField}}" >
  268. <up-imgs :action="apiUrl+'/system/upload/upImg'" v-model="form.{{$column.HtmlField}}" @setUpImgList="setUpImgList{{$column.GoField}}"></up-imgs>
  269. </el-form-item>
  270. {{else if eq $column.HtmlType "file"}}
  271. <el-form-item label="{{$column.ColumnComment}}" prop="{{$column.HtmlField}}" >
  272. <up-file :action="apiUrl+'/system/upload/upFile'" v-model="form.{{$column.HtmlField}}" @setUpFielList="setUpFileList{{$column.GoField}}" :limit="1"></up-file>
  273. </el-form-item>
  274. {{else if eq $column.HtmlType "files"}}
  275. <el-form-item label="{{$column.ColumnComment}}" prop="{{$column.HtmlField}}" >
  276. <up-file :action="apiUrl+'/system/upload/upFile'" v-model="form.{{$column.HtmlField}}" @setUpFielList="setUpFileList{{$column.GoField}}" :limit="10"></up-file>
  277. </el-form-item>
  278. {{end}}
  279. {{end}}
  280. {{end}}
  281. </el-form>
  282. <div slot="footer" class="dialog-footer">
  283. <el-button type="primary" @click="submitForm">确 定</el-button>
  284. <el-button @click="cancel">取 消</el-button>
  285. </div>
  286. </el-dialog>
  287. </div>
  288. </template>
  289. <script>
  290. import {
  291. list{{.table.ClassName}},
  292. get{{.table.ClassName}},
  293. del{{.table.ClassName}},
  294. add{{.table.ClassName}},
  295. update{{.table.ClassName}},
  296. {{range $index,$column:= .table.Columns}}
  297. {{if and (HasSuffix $column.ColumnName "status") (eq $column.IsList "1") }}
  298. change{{$.table.ClassName}}{{$column.GoField}},
  299. {{end}}
  300. {{if ne $column.LinkTableName ""}}
  301. list{{$column.LinkTableClass}},
  302. {{end}}
  303. {{end}}
  304. } from "@/api/{{.table.ModuleName}}/{{$businessName}}";
  305. {{$tokenImp := false}}
  306. {{$imgsImp := false}}
  307. {{$editImp := false }}
  308. {{$fileImp := false}}
  309. {{range $index,$column:=.table.Columns}}
  310. {{if eq $column.HtmlType "richtext"}}
  311. {{$editImp = true}}
  312. {{else if eq $column.HtmlType "imagefile"}}
  313. {{$tokenImp = true}}
  314. {{else if eq $column.HtmlType "images"}}
  315. {{$imgsImp = true}}
  316. {{else if eq $column.HtmlType "file" "files"}}
  317. {{$fileImp = true}}
  318. {{end}}
  319. {{end}}
  320. {{if $editImp}}
  321. import Editor from "@/components/CKeditor";
  322. {{end}}
  323. {{if $tokenImp}}
  324. import { getToken } from '@/utils/auth'
  325. {{end}}
  326. {{if $imgsImp}}
  327. import upImgs from "@/components/upImgs"
  328. {{end}}
  329. {{if $fileImp}}
  330. import upFile from "@/components/upfile"
  331. {{end}}
  332. export default {
  333. components:{
  334. {{if $editImp}}
  335. Editor,
  336. {{end}}
  337. {{if $imgsImp}}
  338. upImgs,
  339. {{end}}
  340. {{if $fileImp}}
  341. upFile,
  342. {{end}}
  343. },
  344. name: "{{.table.ClassName}}",
  345. data() {
  346. return {
  347. // 遮罩层
  348. loading: true,
  349. // 选中数组
  350. ids: [],
  351. // 非单个禁用
  352. single: true,
  353. // 非多个禁用
  354. multiple: true,
  355. // 总条数
  356. total: 0,
  357. // {{.table.FunctionName}}表格数据
  358. {{$businessName}}List: [],
  359. // 弹出层标题
  360. title: "",
  361. // 是否显示弹出层
  362. open: false,
  363. {{range $index, $column := .table.Columns}}
  364. {{if ne $column.DictType ""}}
  365. // {{$column.HtmlField}}Options字典数据
  366. {{$column.HtmlField}}Options: [],
  367. {{else if ne $column.LinkTableName ""}}
  368. // {{$column.HtmlField}}Options关联表数据
  369. {{$column.HtmlField}}Options: [],
  370. {{else if eq $column.HtmlType "imagefile"}}
  371. //图片上传地址
  372. imageUrl{{$column.GoField}}: '',
  373. //上传加载
  374. upLoading{{$column.GoField}}: false,
  375. {{end}}
  376. {{end}}
  377. // 查询参数
  378. queryParams: {
  379. pageNum: 1,
  380. pageSize: 10,{{range $index, $column := .table.Columns}}{{if eq $column.IsQuery "1"}}
  381. {{$column.HtmlField}}: undefined{{if ne $lens $index}},{{end}}{{end}}{{end}}
  382. },
  383. // 表单参数
  384. form: {},
  385. // 表单校验
  386. rules: { {{range $index, $column := .table.Columns}}{{if eq $column.IsRequired "1"}}
  387. {{$column.HtmlField}} : [
  388. { required: true, message: "{{$column.ColumnComment}}不能为空", trigger: "blur" }
  389. ]{{if ne $lens $index}},{{end}}{{end}}{{end}}
  390. }
  391. };
  392. },
  393. created() {
  394. {{range $index, $column := .table.Columns}}
  395. {{if ne $column.DictType ""}}
  396. this.getDicts("{{$column.DictType}}").then(response => {
  397. this.{{$column.HtmlField}}Options = response.data.values||[];
  398. });
  399. {{else if ne $column.LinkTableName ""}}
  400. this.get{{$column.LinkTableClass}}Items()
  401. {{end}}
  402. {{end}}
  403. this.getList();
  404. },
  405. methods: {
  406. {{$setUpData:=true}}
  407. {{range $index, $column := .table.Columns}}
  408. {{if ne $column.LinkTableName ""}}
  409. //关联{{$column.LinkTableName}}表选项
  410. get{{$column.LinkTableClass}}Items() {
  411. this.getItems(list{{$column.LinkTableClass}}, {pageSize:10000}).then(res => {
  412. this.{{$column.HtmlField}}Options = this.setItems(res, '{{$column.LinkLabelId}}', '{{$column.LinkLabelName}}')
  413. })
  414. },
  415. {{else if eq $column.HtmlType "richtext"}}
  416. //富文本编辑器{{$column.ColumnComment}}
  417. set{{$column.GoField}}EditContent(data) {
  418. this.form.{{$column.HtmlField}} = data
  419. },
  420. {{else if eq $column.HtmlType "imagefile"}}
  421. //单图上传{{$column.ColumnComment}}
  422. handleAvatarSuccess{{$column.GoField}}(res, file) {
  423. if (res.code === 0) {
  424. this.imageUrl{{$column.GoField}} = URL.createObjectURL(file.raw)
  425. this.form.{{$column.HtmlField}} = res.data.fileInfo.fileUrl
  426. } else {
  427. this.msgError(res.msg)
  428. }
  429. this.upLoading{{$column.GoField}} = false
  430. },
  431. beforeAvatarUpload{{$column.GoField}}(file) {
  432. this.upLoading{{$column.GoField}} = true
  433. return true
  434. },
  435. {{if $setUpData}}
  436. setUpData() {
  437. return { token: getToken() }
  438. },
  439. {{$setUpData = false}}
  440. {{end}}
  441. {{else if eq $column.HtmlType "images"}}
  442. setUpImgList{{$column.GoField}}(data){
  443. this.form.{{$column.HtmlField}} = data
  444. },
  445. {{else if eq $column.HtmlType "file" "files"}}
  446. setUpFileList{{$column.GoField}}(data){
  447. this.form.{{$column.HtmlField}} = data
  448. },
  449. {{else if and (HasSuffix $column.ColumnName "status") (eq $column.IsList "1")}}
  450. // {{$column.ColumnComment}}修改
  451. {{$column.HtmlField}}Change(row) {
  452. let text = row.{{$column.HtmlField}} === 1 ? "启用" : "停用";
  453. this.$confirm('确认要"' + text + '":吗?', "警告", {
  454. confirmButtonText: "确定",
  455. cancelButtonText: "取消",
  456. type: "warning"
  457. }).then(function() {
  458. return change{{$.table.ClassName}}{{$column.GoField}}(row.{{$.table.PkColumn.ColumnName}}, row.{{$column.HtmlField}});
  459. }).then(() => {
  460. this.msgSuccess(text + "成功");
  461. }).catch(function() {
  462. row.userStatus =row.userStatus === 0 ?1 : 0;
  463. });
  464. },
  465. {{end}}
  466. {{end}}
  467. /** 查询{{.table.FunctionName}}列表 */
  468. getList() {
  469. this.loading = true;
  470. list{{.table.ClassName}}(this.queryParams).then(response => {
  471. this.{{$businessName}}List = response.data.list;
  472. this.total = response.data.total;
  473. this.loading = false;
  474. });
  475. },
  476. {{range $index, $column := .table.Columns}}
  477. {{if ne $column.DictType ""}}
  478. {{if eq $column.HtmlType "checkbox"}}
  479. // {{$column.ColumnComment}}字典翻译
  480. {{$column.HtmlField}}Format(row, column) {
  481. let {{$column.HtmlField}} = row.{{$column.HtmlField}}.split(",")
  482. let data = [];
  483. {{$column.HtmlField}}.map(item=>{
  484. data.push(this.selectDictLabel(this.{{$column.HtmlField}}Options, item))
  485. })
  486. return data.join(",")
  487. },
  488. {{else}}
  489. // {{$column.ColumnComment}}字典翻译
  490. {{$column.HtmlField}}Format(row, column) {
  491. return this.selectDictLabel(this.{{$column.HtmlField}}Options, row.{{$column.HtmlField}});
  492. },
  493. {{end}}
  494. {{else if ne $column.LinkTableName ""}}
  495. // {{$column.ColumnComment}}关联表翻译
  496. {{$column.HtmlField}}Format(row, column) {
  497. return this.selectItemsLabel(this.{{$column.HtmlField}}Options, row.{{$column.HtmlField}});
  498. },
  499. {{end}}
  500. {{end}}
  501. // 取消按钮
  502. cancel() {
  503. this.open = false;
  504. this.reset();
  505. },
  506. // 表单重置
  507. reset() {
  508. this.form = {
  509. {{range $index, $column := .table.Columns}}
  510. {{if eq $column.HtmlType "radio"}}
  511. {{$column.HtmlField}}: "0" ,
  512. {{else if eq $column.HtmlType "checkbox"}}
  513. {{$column.HtmlField}}: [] ,
  514. {{else}}
  515. {{$column.HtmlField}}: undefined,
  516. {{end}}
  517. {{end}}
  518. };
  519. {{range $index, $column := .table.Columns}}
  520. {{if eq $column.HtmlType "imagefile"}}
  521. this.imageUrl{{$column.GoField}} = ''
  522. {{end}}
  523. {{end}}
  524. this.resetForm("form");
  525. },
  526. /** 搜索按钮操作 */
  527. handleQuery() {
  528. this.queryParams.pageNum = 1;
  529. this.getList();
  530. },
  531. /** 重置按钮操作 */
  532. resetQuery() {
  533. this.resetForm("queryForm");
  534. this.handleQuery();
  535. },
  536. // 多选框选中数据
  537. handleSelectionChange(selection) {
  538. this.ids = selection.map(item => item.{{.table.PkColumn.HtmlField}})
  539. this.single = selection.length!=1
  540. this.multiple = !selection.length
  541. },
  542. /** 新增按钮操作 */
  543. handleAdd() {
  544. this.reset();
  545. this.open = true;
  546. this.title = "添加{{.table.FunctionName}}";
  547. },
  548. /** 修改按钮操作 */
  549. handleUpdate(row) {
  550. this.reset();
  551. const {{.table.PkColumn.HtmlField}} = row.{{.table.PkColumn.HtmlField}} || this.ids
  552. get{{.table.ClassName}}({{.table.PkColumn.HtmlField}}).then(response => {
  553. let data = response.data;
  554. {{range $index, $column := .table.Columns}}
  555. {{if eq $column.HtmlType "checkbox"}}
  556. data.{{$column.HtmlField}} = data.{{$column.HtmlField}}.split(",")
  557. {{else if eq $column.HtmlType "radio" "select"}}
  558. data.{{$column.HtmlField}} = ''+data.{{$column.HtmlField}}
  559. {{else if eq $column.HtmlType "imagefile"}}
  560. //单图地址赋值
  561. this.imageUrl{{$column.GoField}} = data.{{$column.HtmlField}} ? this.getUpFileUrl(process.env.VUE_APP_BASE_API,data.{{$column.HtmlField}}) : ''
  562. {{else if eq $column.HtmlType "images" "file" "files"}}
  563. data.{{$column.HtmlField}} =data.{{$column.HtmlField}}?JSON.parse(data.{{$column.HtmlField}}):[]
  564. {{end}}
  565. {{end}}
  566. this.form = data;
  567. this.open = true;
  568. this.title = "修改{{.table.FunctionName}}";
  569. });
  570. },
  571. /** 提交按钮 */
  572. submitForm: function() {
  573. this.$refs["form"].validate(valid => {
  574. if (valid) {
  575. if (this.form.{{.table.PkColumn.HtmlField}} != undefined) {
  576. update{{.table.ClassName}}(this.form).then(response => {
  577. if (response.code === 0) {
  578. this.msgSuccess("修改成功");
  579. this.open = false;
  580. this.getList();
  581. } else {
  582. this.msgError(response.msg);
  583. }
  584. });
  585. } else {
  586. add{{.table.ClassName}}(this.form).then(response => {
  587. if (response.code === 0) {
  588. this.msgSuccess("新增成功");
  589. this.open = false;
  590. this.getList();
  591. } else {
  592. this.msgError(response.msg);
  593. }
  594. });
  595. }
  596. }
  597. });
  598. },
  599. /** 删除按钮操作 */
  600. handleDelete(row) {
  601. const {{.table.PkColumn.HtmlField}}s = row.{{.table.PkColumn.HtmlField}} || this.ids;
  602. this.$confirm('是否确认删除{{.table.FunctionName}}编号为"' + {{.table.PkColumn.HtmlField}}s + '"的数据项?', "警告", {
  603. confirmButtonText: "确定",
  604. cancelButtonText: "取消",
  605. type: "warning"
  606. }).then(function() {
  607. return del{{.table.ClassName}}({{.table.PkColumn.HtmlField}}s);
  608. }).then(() => {
  609. this.getList();
  610. this.msgSuccess("删除成功");
  611. }).catch(function() {});
  612. }
  613. }
  614. };
  615. </script>
  616. <style>
  617. {{range $index,$column:=.table.Columns}}
  618. {{if eq $column.HtmlType "imagefile"}}
  619. .avatar-uploader .el-upload {
  620. border: 1px dashed #d9d9d9;
  621. border-radius: 6px;
  622. cursor: pointer;
  623. position: relative;
  624. overflow: hidden;
  625. }
  626. .avatar-uploader .el-upload:hover {
  627. border-color: #409EFF;
  628. }
  629. .avatar-uploader-icon {
  630. font-size: 28px;
  631. color: #8c939d;
  632. width: 178px;
  633. height: 178px;
  634. line-height: 178px;
  635. text-align: center;
  636. }
  637. .avatar {
  638. width: 178px;
  639. height: 178px;
  640. display: block;
  641. }
  642. {{end}}
  643. {{end}}
  644. </style>