元气智驾官网后台前端页面
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
 
 
 
 

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