You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

312 lines
10 KiB

  1. <template>
  2. <div>
  3. <div class="search-term">
  4. <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
  5. {{- range .Fields}} {{- if .FieldSearchType}} {{- if eq .FieldType "bool" }}
  6. <el-form-item label="{{.FieldDesc}}" prop="{{.FieldJson}}">
  7. <el-select v-model="searchInfo.{{.FieldJson}}" clearable placeholder="请选择">
  8. <el-option
  9. key="true"
  10. label="是"
  11. value="true">
  12. </el-option>
  13. <el-option
  14. key="false"
  15. label="否"
  16. value="false">
  17. </el-option>
  18. </el-select>
  19. </el-form-item>
  20. {{- else }}
  21. <el-form-item label="{{.FieldDesc}}">
  22. <el-input placeholder="搜索条件" v-model="searchInfo.{{.FieldJson}}" />
  23. </el-form-item> {{ end }} {{ end }} {{ end }}
  24. <el-form-item>
  25. <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
  26. <el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog">新增</el-button>
  27. <el-popover v-model="deleteVisible" placement="top" width="160">
  28. <p>确定要删除吗?</p>
  29. <div style="text-align: right; margin: 0">
  30. <el-button size="mini" type="text" @click="deleteVisible = false">取消</el-button>
  31. <el-button size="mini" type="primary" @click="onDelete">确定</el-button>
  32. </div>
  33. <el-button slot="reference" icon="el-icon-delete" size="mini" type="danger" style="margin-left: 10px;">批量删除</el-button>
  34. </el-popover>
  35. </el-form-item>
  36. </el-form>
  37. </div>
  38. <el-table
  39. ref="multipleTable"
  40. border
  41. stripe
  42. style="width: 100%"
  43. tooltip-effect="dark"
  44. :data="tableData"
  45. @selection-change="handleSelectionChange"
  46. >
  47. <el-table-column type="selection" width="55" />
  48. <el-table-column label="日期" width="180">
  49. <template slot-scope="scope">{{ "{{ scope.row.CreatedAt|formatDate }}" }}</template>
  50. </el-table-column>
  51. {{- range .Fields}}
  52. {{- if .DictType}}
  53. <el-table-column label="{{.FieldDesc}}" prop="{{.FieldJson}}" width="120">
  54. <template slot-scope="scope">
  55. {{"{{"}}filterDict(scope.row.{{.FieldJson}},"{{.DictType}}"){{"}}"}}
  56. </template>
  57. </el-table-column>
  58. {{- else if eq .FieldType "bool" }}
  59. <el-table-column label="{{.FieldDesc}}" prop="{{.FieldJson}}" width="120">
  60. <template slot-scope="scope">{{ "{{scope.row."}}{{.FieldJson}}{{"|formatBoolean}}" }}</template>
  61. </el-table-column> {{- else }}
  62. <el-table-column label="{{.FieldDesc}}" prop="{{.FieldJson}}" width="120" /> {{ end -}}
  63. {{ end -}}
  64. <el-table-column label="按钮组">
  65. <template slot-scope="scope">
  66. <el-button size="small" type="primary" icon="el-icon-edit" class="table-button" @click="update{{.StructName}}(scope.row)">变更</el-button>
  67. <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteRow(scope.row)">删除</el-button>
  68. </template>
  69. </el-table-column>
  70. </el-table>
  71. <el-pagination
  72. layout="total, sizes, prev, pager, next, jumper"
  73. :current-page="page"
  74. :page-size="pageSize"
  75. :page-sizes="[10, 30, 50, 100]"
  76. :style="{float:'right',padding:'20px'}"
  77. :total="total"
  78. @current-change="handleCurrentChange"
  79. @size-change="handleSizeChange"
  80. />
  81. <el-dialog :before-close="closeDialog" :visible.sync="dialogFormVisible" title="弹窗操作">
  82. <el-form :model="formData" label-position="right" label-width="80px">
  83. {{- range .Fields}}
  84. <el-form-item label="{{.FieldDesc}}:">
  85. {{ if eq .FieldType "bool" }}
  86. <el-switch active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" v-model="formData.{{.FieldJson}}" clearable ></el-switch>
  87. {{ end -}}
  88. {{ if eq .FieldType "string" }}
  89. <el-input v-model="formData.{{.FieldJson}}" clearable placeholder="请输入" />
  90. {{ end -}}
  91. {{ if eq .FieldType "int" }}
  92. {{- if .DictType}}
  93. <el-select v-model="formData.{{ .FieldJson }}" placeholder="请选择" clearable>
  94. <el-option v-for="(item,key) in {{ .DictType }}Options" :key="key" :label="item.label" :value="item.value" />
  95. </el-select>
  96. {{ else }}
  97. <el-input v-model.number="formData.{{ .FieldJson }}" clearable placeholder="请输入" />
  98. {{ end -}}
  99. {{ end -}}
  100. {{ if eq .FieldType "time.Time" }}
  101. <el-date-picker type="date" placeholder="选择日期" v-model="formData.{{ .FieldJson }}" clearable />
  102. {{ end -}}
  103. {{- if eq .FieldType "float64" }}
  104. <el-input-number v-model="formData.{{ .FieldJson }}" :precision="2" clearable />
  105. {{ end -}}
  106. </el-form-item>
  107. {{- end }}
  108. </el-form>
  109. <div slot="footer" class="dialog-footer">
  110. <el-button @click="closeDialog">取 消</el-button>
  111. <el-button type="primary" @click="enterDialog">确 定</el-button>
  112. </div>
  113. </el-dialog>
  114. </div>
  115. </template>
  116. <script>
  117. import {
  118. create{{.StructName}},
  119. delete{{.StructName}},
  120. delete{{.StructName}}ByIds,
  121. update{{.StructName}},
  122. find{{.StructName}},
  123. get{{.StructName}}List
  124. } from '@/api/{{.PackageName}}' // 此处请自行替换地址
  125. import { formatTimeToStr } from '@/utils/date'
  126. import infoList from '@/mixins/infoList'
  127. export default {
  128. name: '{{.StructName}}',
  129. mixins: [infoList],
  130. data() {
  131. return {
  132. listApi: get{{ .StructName }}List,
  133. dialogFormVisible: false,
  134. type: '',
  135. deleteVisible: false,
  136. multipleSelection: [],
  137. {{ range .Fields}}
  138. {{- if .DictType }}
  139. {{ .DictType }}Options: [],
  140. {{ end -}}
  141. {{ end }}
  142. formData: {
  143. {{range .Fields}}
  144. {{- if eq .FieldType "bool" -}}
  145. {{.FieldJson}}: false,
  146. {{ end -}}
  147. {{- if eq .FieldType "string" -}}
  148. {{.FieldJson}}: '',
  149. {{ end -}}
  150. {{- if eq .FieldType "int" -}}
  151. {{.FieldJson}}: 0,
  152. {{ end -}}
  153. {{- if eq .FieldType "time.Time" -}}
  154. {{.FieldJson}}: new Date(),
  155. {{ end -}}
  156. {{- if eq .FieldType "float64" -}}
  157. {{.FieldJson}}: 0,
  158. {{ end -}}
  159. {{ end }}
  160. }
  161. }
  162. },
  163. filters: {
  164. formatDate: function(time) {
  165. if (time !== null && time !== '') {
  166. var date = new Date(time);
  167. return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss');
  168. } else {
  169. return ''
  170. }
  171. },
  172. formatBoolean: function(bool) {
  173. if (bool != null) {
  174. return bool ? '是' : '否'
  175. } else {
  176. return ''
  177. }
  178. }
  179. },
  180. async created() {
  181. await this.getTableData()
  182. {{ range .Fields -}}
  183. {{- if .DictType }}
  184. await this.getDict('{{.DictType}}')
  185. {{ end -}}
  186. {{- end }}
  187. },
  188. methods: {
  189. // 条件搜索前端看此方法
  190. onSubmit() {
  191. this.page = 1
  192. this.pageSize = 10
  193. {{- range .Fields}} {{- if eq .FieldType "bool" }}
  194. if (this.searchInfo.{{.FieldJson}} === ""){
  195. this.searchInfo.{{.FieldJson}}=null
  196. } {{ end }} {{ end }}
  197. this.getTableData()
  198. },
  199. handleSelectionChange(val) {
  200. this.multipleSelection = val
  201. },
  202. deleteRow(row) {
  203. this.$confirm('确定要删除吗?', '提示', {
  204. confirmButtonText: '确定',
  205. cancelButtonText: '取消',
  206. type: 'warning'
  207. }).then(() => {
  208. this.delete{{.StructName}}(row)
  209. })
  210. },
  211. async onDelete() {
  212. const ids = []
  213. if (this.multipleSelection.length === 0) {
  214. this.$message({
  215. type: 'warning',
  216. message: '请选择要删除的数据'
  217. })
  218. return
  219. }
  220. this.multipleSelection &&
  221. this.multipleSelection.map(item => {
  222. ids.push(item.ID)
  223. })
  224. const res = await delete{{.StructName}}ByIds({ ids })
  225. if (res.code === 0) {
  226. this.$message({
  227. type: 'success',
  228. message: '删除成功'
  229. })
  230. if (this.tableData.length === ids.length && this.page > 1) {
  231. this.page--
  232. }
  233. this.deleteVisible = false
  234. this.getTableData()
  235. }
  236. },
  237. async update{{.StructName}}(row) {
  238. const res = await find{{.StructName}}({ ID: row.ID })
  239. this.type = 'update'
  240. if (res.code === 0) {
  241. this.formData = res.data.re{{.Abbreviation}}
  242. this.dialogFormVisible = true
  243. }
  244. },
  245. closeDialog() {
  246. this.dialogFormVisible = false
  247. this.formData = {
  248. {{range .Fields}}
  249. {{- if eq .FieldType "bool" -}}
  250. {{.FieldJson}}: false,
  251. {{ end -}}
  252. {{- if eq .FieldType "string" -}}
  253. {{.FieldJson}}: '',
  254. {{ end -}}
  255. {{- if eq .FieldType "int" -}}
  256. {{.FieldJson}}: 0,
  257. {{ end -}}
  258. {{- if eq .FieldType "time.Time" -}}
  259. {{.FieldJson}}: new Date(),
  260. {{ end -}}
  261. {{- if eq .FieldType "float64" -}}
  262. {{.FieldJson}}: 0,
  263. {{ end -}}
  264. {{ end }}
  265. }
  266. },
  267. async delete{{.StructName}}(row) {
  268. const res = await delete{{.StructName}}({ ID: row.ID })
  269. if (res.code === 0) {
  270. this.$message({
  271. type: 'success',
  272. message: '删除成功'
  273. })
  274. if (this.tableData.length === 1 && this.page > 1 ) {
  275. this.page--
  276. }
  277. this.getTableData()
  278. }
  279. },
  280. async enterDialog() {
  281. let res
  282. switch (this.type) {
  283. case "create":
  284. res = await create{{.StructName}}(this.formData)
  285. break
  286. case "update":
  287. res = await update{{.StructName}}(this.formData)
  288. break
  289. default:
  290. res = await create{{.StructName}}(this.formData)
  291. break
  292. }
  293. if (res.code === 0) {
  294. this.$message({
  295. type: 'success',
  296. message: '创建/更改成功'
  297. })
  298. this.closeDialog()
  299. this.getTableData()
  300. }
  301. },
  302. openDialog() {
  303. this.type = 'create'
  304. this.dialogFormVisible = true
  305. }
  306. },
  307. }
  308. </script>
  309. <style>
  310. </style>