元气智驾官网后台前端页面
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
 
 
 
 

189 rindas
7.7 KiB

  1. <!--
  2. * @Date: 2021-07-08 11:02:40
  3. * @LastEditTime: 2022-07-27 10:48:43
  4. * @Description: 列表查询demo
  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 :show-overflow-tooltip="true" prop="subTitle" label="副标题" />
  31. <el-table-column :show-overflow-tooltip="true" prop="link" label="链接" />
  32. <el-table-column :show-overflow-tooltip="true" align="center" prop="newOpen" label="是否新开页面打开">
  33. <template slot-scope="scope">
  34. {{ scope.row.newOpen === 1 ? '是' : '否' }}
  35. </template>
  36. </el-table-column>
  37. <el-table-column label="操作" width="230" align="center" fixed="right">
  38. <template slot-scope="scope" class="btn">
  39. <el-button type="text" size="mini" @click="openSave(scope.row)">编辑</el-button>
  40. <el-popover placement="top" width="200" :ref="`del-${scope.$index}`">
  41. <p>是否确认删除该数据?</p>
  42. <div style="text-align: right; margin: 0">
  43. <el-button size="mini"
  44. @click="scope._self.$refs[`del-${scope.$index}`].doClose()">取消</el-button>
  45. <el-button type="primary" size="mini" @click="del(scope)">确定</el-button>
  46. </div>
  47. <el-button slot="reference" type="text" size="mini" style="margin-left:10px">删除</el-button>
  48. </el-popover>
  49. </template>
  50. </el-table-column>
  51. </el-table>
  52. <!--分页组件-->
  53. <pagination />
  54. <!-- 新增修改弹窗 -->
  55. <el-dialog v-if="dialogVisible" title="轮播" :visible.sync="dialogVisible" append-to-body width="600px">
  56. <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="resetform">
  57. <el-form-item label="图片" prop="image">
  58. <uploadFile :url.sync="ruleForm.image" type="image" width="3840" height="1200"/>
  59. <p style="color: #909399;">*请上传3840*1200的图片</p>
  60. </el-form-item>
  61. <el-form-item label="序号" prop="serialNumber">
  62. <el-input v-model="ruleForm.serialNumber"></el-input>
  63. </el-form-item>
  64. <el-form-item label="标题" prop="title">
  65. <el-input v-model="ruleForm.title"></el-input>
  66. </el-form-item>
  67. <el-form-item label="副标题" prop="subTitle">
  68. <el-input v-model="ruleForm.subTitle"></el-input>
  69. </el-form-item>
  70. <el-form-item label="链接">
  71. <el-input v-model="ruleForm.link"></el-input>
  72. </el-form-item>
  73. <el-form-item label="是否新开页面打开">
  74. <el-radio-group v-model="ruleForm.newOpen">
  75. <el-radio label="1">是</el-radio>
  76. <el-radio label="0">否</el-radio>
  77. </el-radio-group>
  78. </el-form-item>
  79. <el-form-item>
  80. <el-button type="primary" :loading="loadingBtn" @click="submitForm('ruleForm')">立即创建</el-button>
  81. <el-button @click="resetForm('ruleForm')">重置</el-button>
  82. </el-form-item>
  83. </el-form>
  84. </el-dialog>
  85. </div>
  86. </template>
  87. <script>
  88. import { delLunbo } from '@/api/homePage'
  89. import { saveLunbo } from '@/api/car'
  90. import CRUD, { presenter, header, crud } from '@crud/crud'
  91. import pagination from '@crud/Pagination'
  92. import uploadFile from '@/components/uploadFile'
  93. export default {
  94. components: { pagination, uploadFile },
  95. mixins: [presenter(), header(), crud()],
  96. data() {
  97. return {
  98. releaseSourceList: [],
  99. dialogVisible: false,
  100. id: '',
  101. ruleForm: {
  102. image: '',
  103. serialNumber: '',
  104. link: '',
  105. newOpen: '1',
  106. subTitle: '',
  107. title: ''
  108. },
  109. rules: {
  110. name: [
  111. { required: true, message: '请上传图片', trigger: 'blur' }
  112. ],
  113. serialNumber: [
  114. { required: true, message: '请输入序号', trigger: 'blur' }
  115. ],
  116. link: [
  117. { required: true, message: '请输入链接', trigger: 'blur' }
  118. ],
  119. desc: [
  120. { required: true, message: '请填写活动形式', trigger: 'blur' }
  121. ]
  122. },
  123. loadingBtn: false
  124. }
  125. },
  126. cruds() {
  127. return CRUD({ title: '列表', url: '/car/lunboList', query: {}})
  128. },
  129. methods: {
  130. openSave(item) {
  131. this.ruleForm.id = item?.id || ''
  132. this.ruleForm.image = item?.image || ''
  133. this.ruleForm.serialNumber = item?.serialNumber || ''
  134. this.ruleForm.link = item?.link || ''
  135. this.ruleForm.newOpen = item?.newOpen || '1'
  136. this.ruleForm.subTitle = item?.subTitle || ''
  137. this.ruleForm.title = item?.title || ''
  138. this.dialogVisible = true
  139. },
  140. close(tag) {
  141. if (tag) this.crud.toQuery()
  142. this.dialogVisible = false
  143. },
  144. /* 删除 */
  145. del(scope) {
  146. delLunbo(scope.row.id).then(res => {
  147. this.$message({
  148. message: '删除成功!',
  149. type: 'success'
  150. })
  151. this.crud.toQuery()
  152. scope._self.$refs[`del-${scope.$index}`].doClose()
  153. })
  154. },
  155. submitForm(formName) {
  156. this.$refs[formName].validate((valid) => {
  157. if (valid) {
  158. this.loadingBtn = true
  159. saveLunbo(this.ruleForm).then(res => {
  160. this.$message({
  161. message: '操作成功!',
  162. type: 'success'
  163. })
  164. this.loadingBtn = false
  165. this.dialogVisible = false
  166. this.$refs[formName].resetFields()
  167. this.crud.toQuery()
  168. }).catch(() => {
  169. this.loadingBtn = false
  170. })
  171. } else {
  172. console.log('error submit!!')
  173. return false
  174. }
  175. })
  176. },
  177. resetForm(formName) {
  178. this.$refs[formName].resetFields()
  179. }
  180. }
  181. }
  182. </script>