元气智驾官网后台前端页面
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.
 
 
 
 

266 rindas
12 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. <el-input v-model="query.title" prefix-icon="el-icon-search" clearable placeholder="标题" class="filter-item"
  12. @keyup.enter.native="crud.toQuery" />
  13. <el-date-picker v-model="query.sendDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" class="date-item" style="width:300px !important; margin: 0 3px 10px 0;"></el-date-picker>
  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="title" label="标题" />
  24. <el-table-column :show-overflow-tooltip="true" prop="subTitle" label="副标题" />
  25. <el-table-column :show-overflow-tooltip="true" prop="detail" label="详情" />
  26. <el-table-column :show-overflow-tooltip="true" prop="image" label="图片">
  27. <template slot-scope="scope">
  28. <img :src="scope.row.image" width="50px" />
  29. </template>
  30. </el-table-column>
  31. <el-table-column :show-overflow-tooltip="true" prop="image" label="视频地址" />
  32. <el-table-column :show-overflow-tooltip="true" prop="sendDate" label="发布时间" />
  33. <el-table-column :show-overflow-tooltip="true" align="center" prop="status" label="发布状态">
  34. <template slot-scope="scope">
  35. {{ scope.row.status === 1 ? '未发布' : '已发布' }}
  36. </template>
  37. </el-table-column>
  38. <el-table-column :show-overflow-tooltip="true" align="center" prop="status" label="是否置顶">
  39. <template slot-scope="scope">
  40. {{ scope.row.first === 1 ? '是' : '否' }}
  41. </template>
  42. </el-table-column>
  43. <el-table-column label="操作" width="230" align="center" fixed="right">
  44. <template slot-scope="scope" class="btn">
  45. <el-button type="text" size="mini" @click="openSave(scope.row)">编辑</el-button>
  46. <el-popover placement="top" width="200" :ref="`first-${scope.$index}`" v-if="scope.row.status === 2 && scope.row.first === 0 ">
  47. <p>是否确认置顶该数据?</p>
  48. <div style="text-align: right; margin: 0">
  49. <el-button size="mini"
  50. @click="scope._self.$refs[`first-${scope.$index}`].doClose()">取消</el-button>
  51. <el-button type="primary" size="mini" @click="first(scope)">确定</el-button>
  52. </div>
  53. <el-button slot="reference" type="text" size="mini" style="margin-left:10px">置顶</el-button>
  54. </el-popover>
  55. <el-popover placement="top" width="200" :ref="`status-${scope.$index}`" v-if="scope.row.status === 2 && scope.row.first === 1 ">
  56. <p>是否确认取消置顶该数据?</p>
  57. <div style="text-align: right; margin: 0">
  58. <el-button size="mini"
  59. @click="scope._self.$refs[`status-${scope.$index}`].doClose()">取消</el-button>
  60. <el-button type="primary" size="mini" @click="cancelfirst(scope)">确定</el-button>
  61. </div>
  62. <el-button slot="reference" type="text" size="mini" style="margin-left:10px">取消置顶</el-button>
  63. </el-popover>
  64. <el-popover placement="top" width="200" :ref="`status-${scope.$index}`" v-if="scope.row.status === 1">
  65. <p>是否确认发布该数据?</p>
  66. <div style="text-align: right; margin: 0">
  67. <el-button size="mini"
  68. @click="scope._self.$refs[`status-${scope.$index}`].doClose()">取消</el-button>
  69. <el-button type="primary" size="mini" @click="statusFn(scope)">确定</el-button>
  70. </div>
  71. <el-button slot="reference" type="text" size="mini" style="margin-left:10px">发布</el-button>
  72. </el-popover>
  73. <el-popover placement="top" width="200" :ref="`del-${scope.$index}`">
  74. <p>是否确认删除该数据?</p>
  75. <div style="text-align: right; margin: 0">
  76. <el-button size="mini"
  77. @click="scope._self.$refs[`del-${scope.$index}`].doClose()">取消</el-button>
  78. <el-button type="primary" size="mini" @click="del(scope)">确定</el-button>
  79. </div>
  80. <el-button slot="reference" type="text" size="mini" style="margin-left:10px">删除</el-button>
  81. </el-popover>
  82. </template>
  83. </el-table-column>
  84. </el-table>
  85. <!--分页组件-->
  86. <pagination />
  87. <!-- 新增修改弹窗 -->
  88. <el-dialog v-if="dialogVisible" title="轮播" :visible.sync="dialogVisible" append-to-body width="600px">
  89. <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="resetform">
  90. <el-form-item label="标题" prop="title">
  91. <el-input v-model="ruleForm.title"></el-input>
  92. </el-form-item>
  93. <el-form-item label="副标题" prop="subTitle">
  94. <el-input v-model="ruleForm.subTitle"></el-input>
  95. </el-form-item>
  96. <el-form-item label="详情" prop="detail">
  97. <el-input v-model="ruleForm.detail"></el-input>
  98. </el-form-item>
  99. <el-form-item label="图片" prop="image">
  100. <uploadFile :url.sync="ruleForm.image" type="image" />
  101. </el-form-item>
  102. <el-form-item label="视频" prop="video">
  103. <uploadFile :url.sync="ruleForm.video" type="video" />
  104. </el-form-item>
  105. <el-form-item label="发布时间" prop="sendDate">
  106. <el-date-picker
  107. v-model="ruleForm.sendDate"
  108. type="datetime"
  109. value-format="yyyy-MM-dd HH:mm:ss"
  110. placeholder="选择发布时间">
  111. </el-date-picker>
  112. </el-form-item>
  113. <el-form-item>
  114. <el-button type="primary" :loading="loadingBtn" @click="submitForm('ruleForm')">立即创建</el-button>
  115. <el-button @click="resetForm('ruleForm')">重置</el-button>
  116. </el-form-item>
  117. </el-form>
  118. </el-dialog>
  119. </div>
  120. </template>
  121. <script>
  122. import { save, del, first, cancelfirst } from '@/api/news'
  123. import CRUD, { presenter, header, crud } from '@crud/crud'
  124. import pagination from '@crud/Pagination'
  125. import uploadFile from '@/components/uploadFile'
  126. import rrOperation from '@crud/RR.operation'
  127. export default {
  128. components: { rrOperation, pagination, uploadFile },
  129. mixins: [presenter(), header(), crud()],
  130. data() {
  131. return {
  132. dialogVisible: false,
  133. ruleForm: {
  134. type: 1,
  135. title: '',
  136. subTitle: '',
  137. detail: '',
  138. image: '',
  139. video: '',
  140. sendDate: '',
  141. status: ''
  142. },
  143. rules: {
  144. name: [
  145. { required: true, message: '请上传图片', trigger: 'blur' }
  146. ],
  147. serialNumber: [
  148. { required: true, message: '请输入序号', trigger: 'blur' }
  149. ],
  150. link: [
  151. { required: true, message: '请输入链接', trigger: 'blur' }
  152. ],
  153. desc: [
  154. { required: true, message: '请填写活动形式', trigger: 'blur' }
  155. ]
  156. },
  157. loadingBtn: false
  158. }
  159. },
  160. cruds() {
  161. return CRUD({ title: '列表', url: '/news/list', query: {}})
  162. },
  163. methods: {
  164. /* 刷新前操作 */
  165. [CRUD.HOOK.beforeRefresh]() {
  166. this.query.sendDateBegin = this.query.sendDate ? this.query.sendDate[0] : ''
  167. this.query.sendDateEnd = this.query.sendDate ? this.query.sendDate[1] : ''
  168. this.query.type = '1'
  169. },
  170. openSave(item) {
  171. if (item) {
  172. this.ruleForm.id = item.id
  173. this.ruleForm.image = item.image
  174. this.ruleForm.title = item.title
  175. this.ruleForm.subTitle = item.subTitle
  176. this.ruleForm.detail = item.detail
  177. this.ruleForm.video = item.video
  178. this.ruleForm.detail = item.detail
  179. this.ruleForm.sendDate = item.sendDate
  180. }
  181. this.dialogVisible = true
  182. },
  183. close(tag) {
  184. if (tag) this.crud.toQuery()
  185. this.dialogVisible = false
  186. },
  187. /* 删除 */
  188. del(scope) {
  189. del(scope.row.id).then(res => {
  190. this.$message({
  191. message: '删除成功!',
  192. type: 'success'
  193. })
  194. this.crud.toQuery()
  195. scope._self.$refs[`del-${scope.$index}`].doClose()
  196. })
  197. },
  198. first(scope) {
  199. first(scope.row.id).then(res => {
  200. this.$message({
  201. message: '操作成功!',
  202. type: 'success'
  203. })
  204. this.crud.toQuery()
  205. scope._self.$refs[`first-${scope.$index}`].doClose()
  206. })
  207. },
  208. cancelfirst(scope) {
  209. cancelfirst(scope.row.id).then(res => {
  210. this.$message({
  211. message: '操作成功!',
  212. type: 'success'
  213. })
  214. this.crud.toQuery()
  215. scope._self.$refs[`cancelfirst-${scope.$index}`].doClose()
  216. })
  217. },
  218. statusFn(scope) {
  219. let data = {
  220. id: scope.row.id,
  221. status: 2
  222. }
  223. save(data).then(res => {
  224. this.$message({
  225. message: '发布成功!',
  226. type: 'success'
  227. })
  228. this.crud.toQuery()
  229. scope._self.$refs[`status-${scope.$index}`].doClose()
  230. })
  231. },
  232. submitForm(formName) {
  233. this.$refs[formName].validate((valid) => {
  234. if (valid) {
  235. this.loadingBtn = true
  236. save(this.ruleForm).then(res => {
  237. this.$message({
  238. message: '操作成功!',
  239. type: 'success'
  240. })
  241. this.loadingBtn = false
  242. this.dialogVisible = false
  243. this.$refs[formName].resetFields()
  244. this.crud.toQuery()
  245. }).catch(() => {
  246. this.loadingBtn = false
  247. })
  248. } else {
  249. console.log('error submit!!')
  250. return false
  251. }
  252. })
  253. },
  254. resetForm(formName) {
  255. this.$refs[formName].resetFields()
  256. }
  257. }
  258. }
  259. </script>