table.vue.tpl 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685
  1. <template>
  2. <div>
  3. <div class="gva-search-box">
  4. <el-form ref="elSearchFormRef" :inline="true" :model="searchInfo" class="demo-form-inline" :rules="searchRule" @keyup.enter="onSubmit">
  5. {{- if .GvaModel }}
  6. <el-form-item label="创建日期" prop="createdAt">
  7. <template #label>
  8. <span>
  9. 创建日期
  10. <el-tooltip content="搜索范围是开始日期(包含)至结束日期(不包含)">
  11. <el-icon><QuestionFilled /></el-icon>
  12. </el-tooltip>
  13. </span>
  14. </template>
  15. <el-date-picker v-model="searchInfo.startCreatedAt" type="datetime" placeholder="开始日期" :disabled-date="time=> searchInfo.endCreatedAt ? time.getTime() > searchInfo.endCreatedAt.getTime() : false"></el-date-picker>
  16. —
  17. <el-date-picker v-model="searchInfo.endCreatedAt" type="datetime" placeholder="结束日期" :disabled-date="time=> searchInfo.startCreatedAt ? time.getTime() < searchInfo.startCreatedAt.getTime() : false"></el-date-picker>
  18. </el-form-item>
  19. {{ end -}}
  20. {{- range .Fields}} {{- if .FieldSearchType}} {{- if eq .FieldType "bool" }}
  21. <el-form-item label="{{.FieldDesc}}" prop="{{.FieldJson}}">
  22. <el-select v-model="searchInfo.{{.FieldJson}}" clearable placeholder="请选择">
  23. <el-option
  24. key="true"
  25. label="是"
  26. value="true">
  27. </el-option>
  28. <el-option
  29. key="false"
  30. label="否"
  31. value="false">
  32. </el-option>
  33. </el-select>
  34. </el-form-item>
  35. {{- else if .DictType}}
  36. <el-form-item label="{{.FieldDesc}}" prop="{{.FieldJson}}">
  37. <el-select v-model="searchInfo.{{.FieldJson}}" clearable placeholder="请选择" @clear="()=>{searchInfo.{{.FieldJson}}=undefined}">
  38. <el-option v-for="(item,key) in {{ .DictType }}Options" :key="key" :label="item.label" :value="item.value" />
  39. </el-select>
  40. </el-form-item>
  41. {{- else}}
  42. <el-form-item label="{{.FieldDesc}}" prop="{{.FieldJson}}">
  43. {{- if eq .FieldType "float64" "int"}}
  44. {{if eq .FieldSearchType "BETWEEN" "NOT BETWEEN"}}
  45. <el-input v-model.number="searchInfo.start{{.FieldName}}" placeholder="最小值" />
  46. —
  47. <el-input v-model.number="searchInfo.end{{.FieldName}}" placeholder="最大值" />
  48. {{- else}}
  49. {{- if .DictType}}
  50. <el-select v-model="searchInfo.{{.FieldJson}}" placeholder="请选择" style="width:100%" :clearable="true" >
  51. <el-option v-for="(item,key) in {{ .DictType }}Options" :key="key" :label="item.label" :value="item.value" />
  52. </el-select>
  53. {{- else}}
  54. <el-input v-model.number="searchInfo.{{.FieldJson}}" placeholder="搜索条件" />
  55. {{- end }}
  56. {{- end}}
  57. {{- else if eq .FieldType "time.Time"}}
  58. {{if eq .FieldSearchType "BETWEEN" "NOT BETWEEN"}}
  59. <template #label>
  60. <span>
  61. {{.FieldDesc}}
  62. <el-tooltip content="搜索范围是开始日期(包含)至结束日期(不包含)">
  63. <el-icon><QuestionFilled /></el-icon>
  64. </el-tooltip>
  65. </span>
  66. </template>
  67. <el-date-picker v-model="searchInfo.start{{.FieldName}}" type="datetime" placeholder="开始日期" :disabled-date="time=> searchInfo.end{{.FieldName}} ? time.getTime() > searchInfo.end{{.FieldName}}.getTime() : false"></el-date-picker>
  68. —
  69. <el-date-picker v-model="searchInfo.end{{.FieldName}}" type="datetime" placeholder="结束日期" :disabled-date="time=> searchInfo.start{{.FieldName}} ? time.getTime() < searchInfo.start{{.FieldName}}.getTime() : false"></el-date-picker>
  70. {{- else}}
  71. <el-date-picker v-model="searchInfo.{{.FieldJson}}" type="datetime" placeholder="搜索条件"></el-date-picker>
  72. {{- end}}
  73. {{- else}}
  74. <el-input v-model="searchInfo.{{.FieldJson}}" placeholder="搜索条件" />
  75. {{- end}}
  76. </el-form-item>{{ end }}{{ end }}{{ end }}
  77. <el-form-item>
  78. <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
  79. <el-button icon="refresh" @click="onReset">重置</el-button>
  80. </el-form-item>
  81. </el-form>
  82. </div>
  83. <div class="gva-table-box">
  84. <div class="gva-btn-list">
  85. <el-button type="primary" icon="plus" @click="openDialog">新增</el-button>
  86. <el-button icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="onDelete">删除</el-button>
  87. </div>
  88. <el-table
  89. ref="multipleTable"
  90. style="width: 100%"
  91. tooltip-effect="dark"
  92. :data="tableData"
  93. row-key="{{.PrimaryField.FieldJson}}"
  94. @selection-change="handleSelectionChange"
  95. {{- if .NeedSort}}
  96. @sort-change="sortChange"
  97. {{- end}}
  98. >
  99. <el-table-column type="selection" width="55" />
  100. {{ if .GvaModel }}
  101. <el-table-column align="left" label="日期" width="180">
  102. <template #default="scope">{{ "{{ formatDate(scope.row.CreatedAt) }}" }}</template>
  103. </el-table-column>
  104. {{ end }}
  105. {{- range .FrontFields}}
  106. {{- if .CheckDataSource }}
  107. <el-table-column {{- if .Sort}} sortable{{- end}} align="left" label="{{.FieldDesc}}" prop="{{.FieldJson}}" width="120">
  108. <template #default="scope">
  109. {{"{{"}} filterDataSource(dataSource.{{.FieldJson}},scope.row.{{.FieldJson}}) {{"}}"}}
  110. </template>
  111. </el-table-column>
  112. {{- else if .DictType}}
  113. <el-table-column {{- if .Sort}} sortable{{- end}} align="left" label="{{.FieldDesc}}" prop="{{.FieldJson}}" width="120">
  114. <template #default="scope">
  115. {{"{{"}} filterDict(scope.row.{{.FieldJson}},{{.DictType}}Options) {{"}}"}}
  116. </template>
  117. </el-table-column>
  118. {{- else if eq .FieldType "bool" }}
  119. <el-table-column {{- if .Sort}} sortable{{- end}} align="left" label="{{.FieldDesc}}" prop="{{.FieldJson}}" width="120">
  120. <template #default="scope">{{"{{"}} formatBoolean(scope.row.{{.FieldJson}}) {{"}}"}}</template>
  121. </el-table-column>
  122. {{- else if eq .FieldType "time.Time" }}
  123. <el-table-column {{- if .Sort}} sortable{{- end}} align="left" label="{{.FieldDesc}}" width="180">
  124. <template #default="scope">{{"{{"}} formatDate(scope.row.{{.FieldJson}}) {{"}}"}}</template>
  125. </el-table-column>
  126. {{- else if eq .FieldType "picture" }}
  127. <el-table-column label="{{.FieldDesc}}" width="200">
  128. <template #default="scope">
  129. <el-image style="width: 100px; height: 100px" :src="getUrl(scope.row.{{.FieldJson}})" fit="cover"/>
  130. </template>
  131. </el-table-column>
  132. {{- else if eq .FieldType "pictures" }}
  133. <el-table-column label="{{.FieldDesc}}" width="200">
  134. <template #default="scope">
  135. <div class="multiple-img-box">
  136. <el-image v-for="(item,index) in scope.row.{{.FieldJson}}" :key="index" style="width: 80px; height: 80px" :src="getUrl(item)" fit="cover"/>
  137. </div>
  138. </template>
  139. </el-table-column>
  140. {{- else if eq .FieldType "video" }}
  141. <el-table-column label="{{.FieldDesc}}" width="200">
  142. <template #default="scope">
  143. <video
  144. style="width: 100px; height: 100px"
  145. muted
  146. preload="metadata"
  147. >
  148. <source :src="getUrl(scope.row.{{.FieldJson}}) + '#t=1'">
  149. </video>
  150. </template>
  151. </el-table-column>
  152. {{- else if eq .FieldType "richtext" }}
  153. <el-table-column label="{{.FieldDesc}}" width="200">
  154. <template #default="scope">
  155. [富文本内容]
  156. </template>
  157. </el-table-column>
  158. {{- else if eq .FieldType "file" }}
  159. <el-table-column label="{{.FieldDesc}}" width="200">
  160. <template #default="scope">
  161. <div class="file-list">
  162. <el-tag v-for="file in scope.row.{{.FieldJson}}" :key="file.uid">{{"{{"}}file.name{{"}}"}}</el-tag>
  163. </div>
  164. </template>
  165. </el-table-column>
  166. {{- else if eq .FieldType "json" }}
  167. <el-table-column label="{{.FieldDesc}}" width="200">
  168. <template #default="scope">
  169. [JSON]
  170. </template>
  171. </el-table-column>
  172. {{- else }}
  173. <el-table-column {{- if .Sort}} sortable{{- end}} align="left" label="{{.FieldDesc}}" prop="{{.FieldJson}}" width="120" />
  174. {{- end }}
  175. {{- end }}
  176. <el-table-column align="left" label="操作" fixed="right" min-width="240">
  177. <template #default="scope">
  178. <el-button type="primary" link class="table-button" @click="getDetails(scope.row)">
  179. <el-icon style="margin-right: 5px"><InfoFilled /></el-icon>
  180. 查看详情
  181. </el-button>
  182. <el-button type="primary" link icon="edit" class="table-button" @click="update{{.StructName}}Func(scope.row)">变更</el-button>
  183. <el-button type="primary" link icon="delete" @click="deleteRow(scope.row)">删除</el-button>
  184. </template>
  185. </el-table-column>
  186. </el-table>
  187. <div class="gva-pagination">
  188. <el-pagination
  189. layout="total, sizes, prev, pager, next, jumper"
  190. :current-page="page"
  191. :page-size="pageSize"
  192. :page-sizes="[10, 30, 50, 100]"
  193. :total="total"
  194. @current-change="handleCurrentChange"
  195. @size-change="handleSizeChange"
  196. />
  197. </div>
  198. </div>
  199. <el-drawer size="800" v-model="dialogFormVisible" :show-close="false" :before-close="closeDialog">
  200. <template #header>
  201. <div class="flex justify-between items-center">
  202. <span class="text-lg">{{"{{"}}type==='create'?'添加':'修改'{{"}}"}}</span>
  203. <div>
  204. <el-button type="primary" @click="enterDialog">确 定</el-button>
  205. <el-button @click="closeDialog">取 消</el-button>
  206. </div>
  207. </div>
  208. </template>
  209. <el-form :model="formData" label-position="top" ref="elFormRef" :rules="rule" label-width="80px">
  210. {{- range .FrontFields}}
  211. <el-form-item label="{{.FieldDesc}}:" prop="{{.FieldJson}}" >
  212. {{- if .CheckDataSource}}
  213. <el-select v-model="formData.{{.FieldJson}}" placeholder="请选择{{.FieldDesc}}" style="width:100%" :clearable="{{.Clearable}}" >
  214. <el-option v-for="(item,key) in dataSource.{{.FieldJson}}" :key="key" :label="item.label" :value="item.value" />
  215. </el-select>
  216. {{- else }}
  217. {{- if eq .FieldType "bool" }}
  218. <el-switch v-model="formData.{{.FieldJson}}" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" clearable ></el-switch>
  219. {{- end }}
  220. {{- if eq .FieldType "string" }}
  221. {{- if .DictType}}
  222. <el-select v-model="formData.{{ .FieldJson }}" placeholder="请选择{{.FieldDesc}}" style="width:100%" :clearable="{{.Clearable}}" >
  223. <el-option v-for="(item,key) in {{ .DictType }}Options" :key="key" :label="item.label" :value="item.value" />
  224. </el-select>
  225. {{- else }}
  226. <el-input v-model="formData.{{.FieldJson}}" :clearable="{{.Clearable}}" placeholder="请输入{{.FieldDesc}}" />
  227. {{- end }}
  228. {{- end }}
  229. {{- if eq .FieldType "richtext" }}
  230. <RichEdit v-model="formData.{{.FieldJson}}"/>
  231. {{- end }}
  232. {{- if eq .FieldType "json" }}
  233. // 此字段为json结构,可以前端自行控制展示和数据绑定模式 需绑定json的key为 formData.{{.FieldJson}} 后端会按照json的类型进行存取
  234. {{"{{"}} formData.{{.FieldJson}} {{"}}"}}
  235. {{- end }}
  236. {{- if eq .FieldType "int" }}
  237. <el-input v-model.number="formData.{{ .FieldJson }}" :clearable="{{.Clearable}}" placeholder="请输入{{.FieldDesc}}" />
  238. {{- end }}
  239. {{- if eq .FieldType "time.Time" }}
  240. <el-date-picker v-model="formData.{{ .FieldJson }}" type="date" style="width:100%" placeholder="选择日期" :clearable="{{.Clearable}}" />
  241. {{- end }}
  242. {{- if eq .FieldType "float64" }}
  243. <el-input-number v-model="formData.{{ .FieldJson }}" style="width:100%" :precision="2" :clearable="{{.Clearable}}" />
  244. {{- end }}
  245. {{- if eq .FieldType "enum" }}
  246. <el-select v-model="formData.{{ .FieldJson }}" placeholder="请选择{{.FieldDesc}}" style="width:100%" :clearable="{{.Clearable}}" >
  247. <el-option v-for="item in [{{.DataTypeLong}}]" :key="item" :label="item" :value="item" />
  248. </el-select>
  249. {{- end }}
  250. {{- if eq .FieldType "picture" }}
  251. <SelectImage
  252. v-model="formData.{{ .FieldJson }}"
  253. file-type="image"
  254. />
  255. {{- end }}
  256. {{- if eq .FieldType "pictures" }}
  257. <SelectImage
  258. multiple
  259. v-model="formData.{{ .FieldJson }}"
  260. file-type="image"
  261. />
  262. {{- end }}
  263. {{- if eq .FieldType "video" }}
  264. <SelectImage
  265. v-model="formData.{{ .FieldJson }}"
  266. file-type="video"
  267. />
  268. {{- end }}
  269. {{- if eq .FieldType "file" }}
  270. <SelectFile v-model="formData.{{ .FieldJson }}" />
  271. {{- end }}
  272. {{- end }}
  273. </el-form-item>
  274. {{- end }}
  275. </el-form>
  276. </el-drawer>
  277. </div>
  278. </template>
  279. <script setup>
  280. import {
  281. {{- if .HasDataSource }}
  282. get{{.StructName}}DataSource,
  283. {{- end }}
  284. create{{.StructName}},
  285. delete{{.StructName}},
  286. delete{{.StructName}}ByIds,
  287. update{{.StructName}},
  288. find{{.StructName}},
  289. get{{.StructName}}List
  290. } from '@/api/{{.Package}}/{{.PackageName}}'
  291. {{- if or .HasPic .HasFile}}
  292. import { getUrl } from '@/utils/image'
  293. {{- end }}
  294. {{- if .HasPic }}
  295. // 图片选择组件
  296. import SelectImage from '@/components/selectImage/selectImage.vue'
  297. {{- end }}
  298. {{- if .HasRichText }}
  299. // 富文本组件
  300. import RichEdit from '@/components/richtext/rich-edit.vue'
  301. {{- end }}
  302. {{- if .HasFile }}
  303. // 文件选择组件
  304. import SelectFile from '@/components/selectFile/selectFile.vue'
  305. {{- end }}
  306. // 全量引入格式化工具 请按需保留
  307. import { getDictFunc, formatDate, formatBoolean, filterDict,filterDataSource, ReturnArrImg, onDownloadFile } from '@/utils/format'
  308. import { ElMessage, ElMessageBox } from 'element-plus'
  309. import { ref, reactive } from 'vue'
  310. defineOptions({
  311. name: '{{.StructName}}'
  312. })
  313. // 自动化生成的字典(可能为空)以及字段
  314. {{- range $index, $element := .DictTypes}}
  315. const {{ $element }}Options = ref([])
  316. {{- end }}
  317. const formData = ref({
  318. {{- range .FrontFields}}
  319. {{- if eq .FieldType "bool" }}
  320. {{.FieldJson}}: false,
  321. {{- end }}
  322. {{- if eq .FieldType "string" }}
  323. {{.FieldJson}}: '',
  324. {{- end }}
  325. {{- if eq .FieldType "richtext" }}
  326. {{.FieldJson}}: '',
  327. {{- end }}
  328. {{- if eq .FieldType "int" }}
  329. {{.FieldJson}}: {{- if .DictType }} undefined{{ else }} 0{{- end }},
  330. {{- end }}
  331. {{- if eq .FieldType "time.Time" }}
  332. {{.FieldJson}}: new Date(),
  333. {{- end }}
  334. {{- if eq .FieldType "float64" }}
  335. {{.FieldJson}}: 0,
  336. {{- end }}
  337. {{- if eq .FieldType "picture" }}
  338. {{.FieldJson}}: "",
  339. {{- end }}
  340. {{- if eq .FieldType "video" }}
  341. {{.FieldJson}}: "",
  342. {{- end }}
  343. {{- if eq .FieldType "pictures" }}
  344. {{.FieldJson}}: [],
  345. {{- end }}
  346. {{- if eq .FieldType "file" }}
  347. {{.FieldJson}}: [],
  348. {{- end }}
  349. {{- if eq .FieldType "json" }}
  350. {{.FieldJson}}: {},
  351. {{- end }}
  352. {{- end }}
  353. })
  354. {{- if .HasDataSource }}
  355. const dataSource = ref([])
  356. const getDataSourceFunc = async()=>{
  357. const res = await get{{.StructName}}DataSource()
  358. if (res.code === 0) {
  359. dataSource.value = res.data
  360. }
  361. }
  362. getDataSourceFunc()
  363. {{- end }}
  364. // 验证规则
  365. const rule = reactive({
  366. {{- range .FrontFields }}
  367. {{- if eq .Require true }}
  368. {{.FieldJson }} : [{
  369. required: true,
  370. message: '{{ .ErrorText }}',
  371. trigger: ['input','blur'],
  372. },
  373. {{- if eq .FieldType "string" }}
  374. {
  375. whitespace: true,
  376. message: '不能只输入空格',
  377. trigger: ['input', 'blur'],
  378. }
  379. {{- end }}
  380. ],
  381. {{- end }}
  382. {{- end }}
  383. })
  384. const searchRule = reactive({
  385. createdAt: [
  386. { validator: (rule, value, callback) => {
  387. if (searchInfo.value.startCreatedAt && !searchInfo.value.endCreatedAt) {
  388. callback(new Error('请填写结束日期'))
  389. } else if (!searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt) {
  390. callback(new Error('请填写开始日期'))
  391. } else if (searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt && (searchInfo.value.startCreatedAt.getTime() === searchInfo.value.endCreatedAt.getTime() || searchInfo.value.startCreatedAt.getTime() > searchInfo.value.endCreatedAt.getTime())) {
  392. callback(new Error('开始日期应当早于结束日期'))
  393. } else {
  394. callback()
  395. }
  396. }, trigger: 'change' }
  397. ],
  398. {{- range .FrontFields }}
  399. {{- if .FieldSearchType}}
  400. {{- if eq .FieldType "time.Time" }}
  401. {{.FieldJson }} : [{ validator: (rule, value, callback) => {
  402. if (searchInfo.value.start{{.FieldName}} && !searchInfo.value.end{{.FieldName}}) {
  403. callback(new Error('请填写结束日期'))
  404. } else if (!searchInfo.value.start{{.FieldName}} && searchInfo.value.end{{.FieldName}}) {
  405. callback(new Error('请填写开始日期'))
  406. } else if (searchInfo.value.start{{.FieldName}} && searchInfo.value.end{{.FieldName}} && (searchInfo.value.start{{.FieldName}}.getTime() === searchInfo.value.end{{.FieldName}}.getTime() || searchInfo.value.start{{.FieldName}}.getTime() > searchInfo.value.end{{.FieldName}}.getTime())) {
  407. callback(new Error('开始日期应当早于结束日期'))
  408. } else {
  409. callback()
  410. }
  411. }, trigger: 'change' }],
  412. {{- end }}
  413. {{- end }}
  414. {{- end }}
  415. })
  416. const elFormRef = ref()
  417. const elSearchFormRef = ref()
  418. // =========== 表格控制部分 ===========
  419. const page = ref(1)
  420. const total = ref(0)
  421. const pageSize = ref(10)
  422. const tableData = ref([])
  423. const searchInfo = ref({})
  424. {{- if .NeedSort}}
  425. // 排序
  426. const sortChange = ({ prop, order }) => {
  427. const sortMap = {
  428. {{- range .FrontFields}}
  429. {{- if and .Sort}}
  430. {{- if not (eq .ColumnName "")}}
  431. {{.FieldJson}}: '{{.ColumnName}}',
  432. {{- end}}
  433. {{- end}}
  434. {{- end}}
  435. }
  436. let sort = sortMap[prop]
  437. if(!sort){
  438. sort = prop.replace(/[A-Z]/g, match => `_${match.toLowerCase()}`)
  439. }
  440. searchInfo.value.sort = sort
  441. searchInfo.value.order = order
  442. getTableData()
  443. }
  444. {{- end}}
  445. // 重置
  446. const onReset = () => {
  447. searchInfo.value = {}
  448. getTableData()
  449. }
  450. // 搜索
  451. const onSubmit = () => {
  452. elSearchFormRef.value?.validate(async(valid) => {
  453. if (!valid) return
  454. page.value = 1
  455. pageSize.value = 10
  456. {{- range .FrontFields}}{{- if eq .FieldType "bool" }}
  457. if (searchInfo.value.{{.FieldJson}} === ""){
  458. searchInfo.value.{{.FieldJson}}=null
  459. }{{ end }}{{ end }}
  460. getTableData()
  461. })
  462. }
  463. // 分页
  464. const handleSizeChange = (val) => {
  465. pageSize.value = val
  466. getTableData()
  467. }
  468. // 修改页面容量
  469. const handleCurrentChange = (val) => {
  470. page.value = val
  471. getTableData()
  472. }
  473. // 查询
  474. const getTableData = async() => {
  475. const table = await get{{.StructName}}List({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
  476. if (table.code === 0) {
  477. tableData.value = table.data.list
  478. total.value = table.data.total
  479. page.value = table.data.page
  480. pageSize.value = table.data.pageSize
  481. }
  482. }
  483. getTableData()
  484. // ============== 表格控制部分结束 ===============
  485. // 获取需要的字典 可能为空 按需保留
  486. const setOptions = async () =>{
  487. {{- range $index, $element := .DictTypes }}
  488. {{ $element }}Options.value = await getDictFunc('{{$element}}')
  489. {{- end }}
  490. }
  491. // 获取需要的字典 可能为空 按需保留
  492. setOptions()
  493. // 多选数据
  494. const multipleSelection = ref([])
  495. // 多选
  496. const handleSelectionChange = (val) => {
  497. multipleSelection.value = val
  498. }
  499. // 删除行
  500. const deleteRow = (row) => {
  501. ElMessageBox.confirm('确定要删除吗?', '提示', {
  502. confirmButtonText: '确定',
  503. cancelButtonText: '取消',
  504. type: 'warning'
  505. }).then(() => {
  506. delete{{.StructName}}Func(row)
  507. })
  508. }
  509. // 多选删除
  510. const onDelete = async() => {
  511. ElMessageBox.confirm('确定要删除吗?', '提示', {
  512. confirmButtonText: '确定',
  513. cancelButtonText: '取消',
  514. type: 'warning'
  515. }).then(async() => {
  516. const {{.PrimaryField.FieldJson}}s = []
  517. if (multipleSelection.value.length === 0) {
  518. ElMessage({
  519. type: 'warning',
  520. message: '请选择要删除的数据'
  521. })
  522. return
  523. }
  524. multipleSelection.value &&
  525. multipleSelection.value.map(item => {
  526. {{.PrimaryField.FieldJson}}s.push(item.{{.PrimaryField.FieldJson}})
  527. })
  528. const res = await delete{{.StructName}}ByIds({ {{.PrimaryField.FieldJson}}s })
  529. if (res.code === 0) {
  530. ElMessage({
  531. type: 'success',
  532. message: '删除成功'
  533. })
  534. if (tableData.value.length === {{.PrimaryField.FieldJson}}s.length && page.value > 1) {
  535. page.value--
  536. }
  537. getTableData()
  538. }
  539. })
  540. }
  541. // 行为控制标记(弹窗内部需要增还是改)
  542. const type = ref('')
  543. // 更新行
  544. const update{{.StructName}}Func = async(row) => {
  545. const res = await find{{.StructName}}({ {{.PrimaryField.FieldJson}}: row.{{.PrimaryField.FieldJson}} })
  546. type.value = 'update'
  547. if (res.code === 0) {
  548. formData.value = res.data.re{{.Abbreviation}}
  549. dialogFormVisible.value = true
  550. }
  551. }
  552. // 删除行
  553. const delete{{.StructName}}Func = async (row) => {
  554. const res = await delete{{.StructName}}({ {{.PrimaryField.FieldJson}}: row.{{.PrimaryField.FieldJson}} })
  555. if (res.code === 0) {
  556. ElMessage({
  557. type: 'success',
  558. message: '删除成功'
  559. })
  560. if (tableData.value.length === 1 && page.value > 1) {
  561. page.value--
  562. }
  563. getTableData()
  564. }
  565. }
  566. // 弹窗控制标记
  567. const dialogFormVisible = ref(false)
  568. // 打开弹窗
  569. const openDialog = () => {
  570. type.value = 'create'
  571. dialogFormVisible.value = true
  572. }
  573. // 关闭弹窗
  574. const closeDialog = () => {
  575. dialogFormVisible.value = false
  576. formData.value = {
  577. {{- range .FrontFields}}
  578. {{- if eq .FieldType "bool" }}
  579. {{.FieldJson}}: false,
  580. {{- end }}
  581. {{- if eq .FieldType "string" }}
  582. {{.FieldJson}}: '',
  583. {{- end }}
  584. {{- if eq .FieldType "int" }}
  585. {{.FieldJson}}: {{- if .DictType }} undefined{{ else }} 0{{- end }},
  586. {{- end }}
  587. {{- if eq .FieldType "time.Time" }}
  588. {{.FieldJson}}: new Date(),
  589. {{- end }}
  590. {{- if eq .FieldType "float64" }}
  591. {{.FieldJson}}: 0,
  592. {{- end }}
  593. {{- end }}
  594. }
  595. }
  596. // 弹窗确定
  597. const enterDialog = async () => {
  598. elFormRef.value?.validate( async (valid) => {
  599. if (!valid) return
  600. let res
  601. switch (type.value) {
  602. case 'create':
  603. res = await create{{.StructName}}(formData.value)
  604. break
  605. case 'update':
  606. res = await update{{.StructName}}(formData.value)
  607. break
  608. default:
  609. res = await create{{.StructName}}(formData.value)
  610. break
  611. }
  612. if (res.code === 0) {
  613. ElMessage({
  614. type: 'success',
  615. message: '创建/更改成功'
  616. })
  617. closeDialog()
  618. getTableData()
  619. }
  620. })
  621. }
  622. {{if .HasFile }}
  623. const downloadFile = (url) => {
  624. window.open(getUrl(url), '_blank')
  625. }
  626. {{end}}
  627. </script>
  628. <style>
  629. {{if .HasFile }}
  630. .file-list{
  631. display: flex;
  632. flex-wrap: wrap;
  633. gap: 4px;
  634. }
  635. .fileBtn{
  636. margin-bottom: 10px;
  637. }
  638. .fileBtn:last-child{
  639. margin-bottom: 0;
  640. }
  641. {{end}}
  642. </style>