元气智驾官网后台前端页面
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 
 

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