元气智驾官网后台前端页面
Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
 
 
 
 

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