YardList.vue 12 KB

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