元气智驾官网后台前端页面
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

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