元气智驾官网后台前端页面
Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 
 

167 linhas
6.5 KiB

  1. <!--
  2. * @Date: 2021-07-08 11:02:40
  3. * @LastEditTime: 2022-07-27 10:48:43
  4. * @Description:数字人直播
  5. -->
  6. <template>
  7. <div class="app-container">
  8. <!--工具栏-->
  9. <div class="head-container">
  10. <!-- <div>
  11. 搜索
  12. <el-input v-model="query.name" prefix-icon="el-icon-search" clearable placeholder="名称" class="filter-item"
  13. @keyup.enter.native="crud.toQuery" />
  14. <rrOperation />
  15. </div> -->
  16. <div>
  17. <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus"
  18. @click="openSave()">新增</el-button>
  19. </div>
  20. </div>
  21. <!--表格渲染-->
  22. <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;">
  23. <el-table-column :show-overflow-tooltip="true" prop="serialNumber" label="序号" />
  24. <el-table-column :show-overflow-tooltip="true" prop="image" label="图片">
  25. <template slot-scope="scope">
  26. <img :src="scope.row.image" width="50px" />
  27. </template>
  28. </el-table-column>
  29. <el-table-column :show-overflow-tooltip="true" prop="title" label="标题" />
  30. <el-table-column label="操作" width="230" align="center" fixed="right">
  31. <template slot-scope="scope" class="btn">
  32. <el-button type="text" size="mini" @click="openSave(scope.row)">编辑</el-button>
  33. <el-popover placement="top" width="200" :ref="`del-${scope.$index}`">
  34. <p>是否确认删除该数据?</p>
  35. <div style="text-align: right; margin: 0">
  36. <el-button size="mini"
  37. @click="scope._self.$refs[`del-${scope.$index}`].doClose()">取消</el-button>
  38. <el-button type="primary" size="mini" @click="del(scope)">确定</el-button>
  39. </div>
  40. <el-button slot="reference" type="text" size="mini" style="margin-left:10px">删除</el-button>
  41. </el-popover>
  42. </template>
  43. </el-table-column>
  44. </el-table>
  45. <!--分页组件-->
  46. <pagination />
  47. <!-- 新增修改弹窗 -->
  48. <el-dialog v-if="dialogVisible" title="轮播" :visible.sync="dialogVisible" append-to-body width="600px">
  49. <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="resetform">
  50. <el-form-item label="图片" prop="image">
  51. <uploadFile :url.sync="ruleForm.image" type="image" />
  52. </el-form-item>
  53. <el-form-item label="序号" prop="serialNumber">
  54. <el-input v-model="ruleForm.serialNumber"></el-input>
  55. </el-form-item>
  56. <el-form-item label="标题" prop="title">
  57. <el-input v-model="ruleForm.title"></el-input>
  58. </el-form-item>
  59. <el-form-item label="副标题" prop="subTitle">
  60. <el-input v-model="ruleForm.subTitle"></el-input>
  61. </el-form-item>
  62. <el-form-item>
  63. <el-button type="primary" :loading="loadingBtn" @click="submitForm('ruleForm')">立即创建</el-button>
  64. <el-button @click="resetForm('ruleForm')">重置</el-button>
  65. </el-form-item>
  66. </el-form>
  67. </el-dialog>
  68. </div>
  69. </template>
  70. <script>
  71. import { delLunbo } from '@/api/homePage'
  72. import { saveShuzirenZhiBo } from '@/api/aigc'
  73. import CRUD, { presenter, header, crud } from '@crud/crud'
  74. import pagination from '@crud/Pagination'
  75. import uploadFile from '@/components/uploadFile'
  76. export default {
  77. components: { pagination, uploadFile },
  78. mixins: [presenter(), header(), crud()],
  79. data() {
  80. return {
  81. dialogVisible: false,
  82. ruleForm: {
  83. image: '',
  84. serialNumber: '',
  85. title: '',
  86. subTitle: ''
  87. },
  88. rules: {
  89. name: [
  90. { required: true, message: '请上传图片', trigger: 'blur' }
  91. ],
  92. serialNumber: [
  93. { required: true, message: '请输入序号', trigger: 'blur' }
  94. ],
  95. title: [
  96. { required: true, message: '请输入标题', trigger: 'blur' }
  97. ],
  98. subTitle: [
  99. { required: true, message: '请输入副标题', trigger: 'blur' }
  100. ]
  101. },
  102. loadingBtn: false
  103. }
  104. },
  105. cruds() {
  106. return CRUD({ title: '列表', url: '/aigc/shuzirenZhiBoList', query: {}})
  107. },
  108. methods: {
  109. openSave(item) {
  110. if (item) {
  111. this.ruleForm.id = item.id
  112. this.ruleForm.image = item.image
  113. this.ruleForm.serialNumber = item.serialNumber
  114. this.ruleForm.title = item.title
  115. this.ruleForm.subTitle = item.subTitle
  116. }
  117. this.dialogVisible = true
  118. },
  119. close(tag) {
  120. if (tag) this.crud.toQuery()
  121. this.dialogVisible = false
  122. },
  123. /* 删除 */
  124. del(scope) {
  125. delLunbo(scope.row.id).then(res => {
  126. this.$message({
  127. message: '删除成功!',
  128. type: 'success'
  129. })
  130. this.crud.toQuery()
  131. scope._self.$refs[`del-${scope.$index}`].doClose()
  132. })
  133. },
  134. submitForm(formName) {
  135. this.$refs[formName].validate((valid) => {
  136. if (valid) {
  137. this.loadingBtn = true
  138. saveShuzirenZhiBo(this.ruleForm).then(res => {
  139. this.$message({
  140. message: '操作成功!',
  141. type: 'success'
  142. })
  143. this.loadingBtn = false
  144. this.dialogVisible = false
  145. this.$refs[formName].resetFields()
  146. this.crud.toQuery()
  147. }).catch(() => {
  148. this.loadingBtn = false
  149. })
  150. } else {
  151. console.log('error submit!!')
  152. return false
  153. }
  154. })
  155. },
  156. resetForm(formName) {
  157. this.$refs[formName].resetFields()
  158. }
  159. }
  160. }
  161. </script>