materialList.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400
  1. <style>
  2. .ping .ant-modal-content .ant-modal-footer {
  3. display: none !important;
  4. }
  5. .ant-modal-body {
  6. padding-top: 0px;
  7. }
  8. li {
  9. list-style-type: none;
  10. }
  11. </style>
  12. <style lang="scss" scoped>
  13. .actor-photo-list {
  14. display: flex;
  15. padding-left: 0;
  16. li {
  17. width: 25%;
  18. margin: 10px;
  19. position: relative;
  20. height: 250px;
  21. border: 1px solid #f2f2f2;
  22. img,
  23. video {
  24. width: 100%;
  25. margin-top: auto;
  26. margin-bottom: auto;
  27. top: 0;
  28. bottom: 0;
  29. position: absolute;
  30. max-height: 250px;
  31. }
  32. }
  33. }
  34. </style>
  35. <template>
  36. <a-card :bordered="false">
  37. <!-- 查询区域 -->
  38. <div class="table-page-search-wrapper">
  39. <a-form layout="inline">
  40. <a-row :gutter="24">
  41. <a-col :md="6" :sm="8">
  42. <a-form-item label="素材名称">
  43. <a-input placeholder="请输入素材名称" v-model="queryParam.buildingName"></a-input>
  44. </a-form-item>
  45. </a-col>
  46. <a-col :md="6" :sm="8">
  47. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  48. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  49. <a-button
  50. type="primary"
  51. @click="searchReset"
  52. icon="reload"
  53. style="margin-left: 8px"
  54. >重置</a-button>
  55. </span>
  56. </a-col>
  57. </a-row>
  58. </a-form>
  59. </div>
  60. <!-- 操作按钮区域 -->
  61. <!-- <div class="table-operator">
  62. <a-button @click="handleAdd" v-show="show" type="primary" icon="plus">新增</a-button>
  63. </div>-->
  64. <!-- table区域-begin -->
  65. <div>
  66. <a-table
  67. ref="table"
  68. size="middle"
  69. bordered
  70. rowKey="id"
  71. :columns="columns"
  72. :dataSource="dataSource"
  73. :pagination="ipagination"
  74. :loading="loading"
  75. >
  76. <!-- 字符串超长截取省略号显示-->
  77. <span slot="esContent" slot-scope="text">
  78. <j-ellipsis :value="text" :length="10" />
  79. </span>
  80. <span slot="url" slot-scope="url,record">
  81. <img :src="url" alt style="height:150px"/>
  82. </span>
  83. <span slot="action">
  84. <!-- <a href="javascript:;" @click="handleDetail(record)">详情</a>
  85. <a-divider type="vertical" />
  86. <a-dropdown>
  87. <a class="ant-dropdown-link">
  88. 更多
  89. <a-icon type="down" />
  90. </a>
  91. <a-menu slot="overlay">
  92. <a-menu-item v-show="show">
  93. <a @click="handleEdit(record)">编辑</a>
  94. </a-menu-item>
  95. </a-menu>
  96. </a-dropdown>
  97. <a-divider type="vertical" />
  98. <a href="javascript:;" @click="showDetail(record)">场地信息</a>-->
  99. </span>
  100. </a-table>
  101. </div>
  102. <!-- table区域-end -->
  103. <!-- 表单区域 -->
  104. <a-modal title="详情" v-model="detail" class="ping" :width="800">
  105. <a-tabs defaultActiveKey="1" @change="callback" v-model="indexDetail">
  106. <a-tab-pane tab="场地图集" key="1" forceRender>
  107. <div>
  108. <a type="primary" style="margin-left:10px" @click="addPhoto=true">新增场地图片</a>
  109. <ul class="actor-photo-list">
  110. <li v-for="(item,index) of photoList" :key="index">
  111. <a-icon
  112. type="close-circle"
  113. style="position:absolute;top:-5px;right:-5px;color:red;z-index:10;cursor: pointer;"
  114. @click="deteleImg(item.id)"
  115. />
  116. <img :src="item.photoUrl" alt />
  117. </li>
  118. </ul>
  119. </div>
  120. <div style="text-align:right">
  121. <a-pagination
  122. showQuickJumper
  123. :total="total"
  124. @change="pageChange"
  125. :pageSize.sync="pageSize"
  126. />
  127. </div>
  128. </a-tab-pane>
  129. <a-tab-pane tab="场地视频" key="2">
  130. <div>
  131. <a type="primary" style="margin-left:10px" @click="addVideo=true">新增场地视频</a>
  132. <ul class="actor-photo-list">
  133. <li v-for="(item,index) of videoList" :key="index">
  134. <a-icon
  135. type="close-circle"
  136. style="position:absolute;top:-5px;right:-5px;color:red;z-index:10;cursor: pointer;"
  137. @click="deteleVideo(item.id)"
  138. />
  139. <video
  140. class="video"
  141. :src="item.videoUrl"
  142. controls="controls"
  143. style="min-height:160px"
  144. >您的浏览器不支持 video 标签。</video>
  145. </li>
  146. </ul>
  147. </div>
  148. <div style="text-align:right">
  149. <a-pagination
  150. showQuickJumper
  151. :total="videoTotal"
  152. @change="pageChange"
  153. :pageSize.sync="pageSize"
  154. />
  155. </div>
  156. </a-tab-pane>
  157. </a-tabs>
  158. </a-modal>
  159. <!-- 新增图集 -->
  160. <a-modal
  161. v-model="addPhoto"
  162. title="新增图集"
  163. @ok="handleOk('photo')"
  164. @cancel="handleCancel('photo')"
  165. >
  166. <upload-to-ali
  167. style="margin:10px"
  168. v-model="imageUrl"
  169. :customDomain="customDomain"
  170. preview
  171. :region="region"
  172. :bucket="bucket"
  173. :accept="acceptImage"
  174. :max="1"
  175. :size="1024000"
  176. :accessKeyId="accessKeyId"
  177. :accessKeySecret="accessKeySecret"
  178. ></upload-to-ali>
  179. </a-modal>
  180. <!-- 新增作品 -->
  181. <a-modal
  182. v-model="addVideo"
  183. title="新增作品"
  184. @ok="handleOk('video')"
  185. @cancel="handleCancel('video')"
  186. >
  187. <upload-to-ali
  188. style="margin:10px"
  189. v-model="videoUrl"
  190. :customDomain="customDomain"
  191. preview
  192. :region="region"
  193. :bucket="bucket"
  194. :accept="acceptVideo"
  195. :max="1"
  196. :size="1024000"
  197. :accessKeyId="accessKeyId"
  198. :accessKeySecret="accessKeySecret"
  199. ></upload-to-ali>
  200. </a-modal>
  201. </a-card>
  202. </template>
  203. <script>
  204. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  205. import JEllipsis from '@/components/jeecg/JEllipsis'
  206. import UploadToAli from '@femessage/upload-to-ali'
  207. import { yardPhotoList, yardVideoList, yardPhotoDelete, yardVideoDelete, yardPhotoAdd, yardVideoAdd } from '@/api/yard'
  208. export default {
  209. name: 'YardList',
  210. mixins: [JeecgListMixin],
  211. components: {
  212. JEllipsis,
  213. UploadToAli
  214. },
  215. data() {
  216. return {
  217. queryParam: {},
  218. description: '场地管理',
  219. // 新增修改按钮是否显示
  220. show: true,
  221. // 表头
  222. columns: [
  223. // {
  224. // title: '素材名称',
  225. // align: 'center',
  226. // dataIndex: ''
  227. // },
  228. {
  229. title: '素材展示',
  230. align: 'center',
  231. dataIndex: 'url',
  232. scopedSlots: { customRender: 'url' }
  233. },
  234. // {
  235. // title: '素材上传人',
  236. // align: 'center',
  237. // dataIndex: ''
  238. // },
  239. // {
  240. // title: '素材审核',
  241. // align: 'center',
  242. // dataIndex: ''
  243. // },
  244. {
  245. title: '创建时间',
  246. align: 'center',
  247. dataIndex: 'createTime'
  248. },
  249. // {
  250. // title: '投放',
  251. // align: 'center',
  252. // dataIndex: ''
  253. // },
  254. {
  255. title: '操作',
  256. dataIndex: 'action',
  257. align: 'center',
  258. scopedSlots: { customRender: 'action' }
  259. }
  260. ],
  261. url: {
  262. list: '/ctop/materialInfo/list'
  263. },
  264. detail: false,
  265. indexDetail: '1',
  266. currentPage: 0,
  267. pageSize: 4,
  268. videoTotal: 0,
  269. photoTotal: 0,
  270. total: 0,
  271. videoList: [],
  272. photoList: [],
  273. imageUrl: '',
  274. videoUrl: '',
  275. customDomain: '',
  276. region: 'oss-cn-beijing',
  277. bucket: 'ctop-media',
  278. acceptVideo: 'video/mpeg,video/mp4',
  279. acceptImage: 'image/jpeg,image/jpg,image/png',
  280. accessKeyId: 'LTAIbNbqWzSOklQV',
  281. accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
  282. addPhoto: false,
  283. addVideo: false,
  284. confirmLoading: true
  285. }
  286. },
  287. methods: {
  288. showDetail(item) {
  289. console.log(item)
  290. this.detail = true
  291. this.id = item.id
  292. this.getPhoto()
  293. },
  294. callback(key) {
  295. console.log(key)
  296. if (key == '1') {
  297. this.currentPage = 1
  298. this.getPhoto()
  299. } else if (key == '2') {
  300. this.currentPage = 1
  301. this.getVideo()
  302. }
  303. },
  304. pageChange: function(page) {
  305. console.log(page)
  306. this.currentPage = page
  307. if (this.indexDetail == '1') {
  308. this.getPhoto()
  309. } else if (this.indexDetail == '2') {
  310. this.getVideo()
  311. }
  312. },
  313. getPhoto() {
  314. yardPhotoList({ pageNo: this.currentPage, pageSize: 4, yardId: this.id }).then(res => {
  315. if (res.code == 0) {
  316. console.log(res)
  317. this.photoList = res.result.records
  318. this.total = res.result.total
  319. }
  320. })
  321. },
  322. getVideo() {
  323. yardVideoList({ pageNo: this.currentPage, pageSize: 4, yardId: this.id }).then(res => {
  324. if (res.code == 0) {
  325. console.log(res)
  326. this.videoList = res.result.records
  327. this.videoTotal = res.result.total
  328. }
  329. })
  330. },
  331. handleOk(type) {
  332. const that = this
  333. if (type == 'photo') {
  334. yardPhotoAdd({ yardId: that.id, photoUrl: that.imageUrl })
  335. .then(res => {
  336. if (res.success) {
  337. this.getPhoto()
  338. this.handleCancel('photo')
  339. } else {
  340. that.$message.warning(res.message)
  341. }
  342. })
  343. .finally(() => {
  344. that.confirmLoading = false
  345. that.handleCancel('photo')
  346. })
  347. } else {
  348. yardVideoAdd({ yardId: that.id, videoUrl: that.videoUrl })
  349. .then(res => {
  350. if (res.success) {
  351. this.getVideo()
  352. this.handleCancel('video')
  353. } else {
  354. that.$message.warning(res.message)
  355. }
  356. })
  357. .finally(() => {
  358. that.confirmLoading = false
  359. that.handleCancel('video')
  360. })
  361. }
  362. },
  363. handleCancel(type) {
  364. if (type == 'photo') {
  365. this.imageUrl = ''
  366. this.addPhoto = false
  367. } else {
  368. this.videoUrl = ''
  369. this.addVideo = false
  370. }
  371. },
  372. deteleImg(id) {
  373. yardPhotoDelete({ id: id }).then(res => {
  374. if (res.code == 200) {
  375. console.log(res)
  376. this.getPhoto()
  377. }
  378. })
  379. },
  380. deteleVideo(id) {
  381. yardVideoDelete({ id: id }).then(res => {
  382. if (res.code == 200) {
  383. console.log(res)
  384. this.getVideo()
  385. }
  386. })
  387. }
  388. }
  389. }
  390. </script>
  391. <style scoped>
  392. @import '~@assets/less/common.less';
  393. </style>