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