|
@@ -1,402 +1,402 @@
|
|
-<style>
|
|
|
|
-.ping .ant-modal-content .ant-modal-footer {
|
|
|
|
- display: none !important;
|
|
|
|
-}
|
|
|
|
-.ant-modal-body {
|
|
|
|
- padding-top: 0px;
|
|
|
|
-}
|
|
|
|
-li {
|
|
|
|
- list-style-type: none;
|
|
|
|
-}
|
|
|
|
-</style>
|
|
|
|
-<style lang="scss" scoped>
|
|
|
|
-.actor-photo-list {
|
|
|
|
- display: flex;
|
|
|
|
- padding-left: 0;
|
|
|
|
- li {
|
|
|
|
- width: 25%;
|
|
|
|
- margin: 10px;
|
|
|
|
- position: relative;
|
|
|
|
- height: 250px;
|
|
|
|
- border: 1px solid #f2f2f2;
|
|
|
|
- img,
|
|
|
|
- video {
|
|
|
|
- width: 100%;
|
|
|
|
- margin-top: auto;
|
|
|
|
- margin-bottom: auto;
|
|
|
|
- top: 0;
|
|
|
|
- bottom: 0;
|
|
|
|
- position: absolute;
|
|
|
|
- max-height: 250px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-</style>
|
|
|
|
-<template>
|
|
|
|
- <a-card :bordered="false">
|
|
|
|
- <!-- 查询区域 -->
|
|
|
|
- <div class="table-page-search-wrapper">
|
|
|
|
- <a-form layout="inline">
|
|
|
|
- <a-row :gutter="24">
|
|
|
|
- <a-col :md="6" :sm="8">
|
|
|
|
- <a-form-item label="场地名称">
|
|
|
|
- <a-input placeholder="请输入场地名称" v-model="queryParam.buildingName"></a-input>
|
|
|
|
- </a-form-item>
|
|
|
|
- </a-col>
|
|
|
|
-
|
|
|
|
- <a-col :md="6" :sm="8">
|
|
|
|
- <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
|
|
|
- <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
|
|
|
- <a-button
|
|
|
|
- type="primary"
|
|
|
|
- @click="searchReset"
|
|
|
|
- icon="reload"
|
|
|
|
- style="margin-left: 8px"
|
|
|
|
- >重置</a-button>
|
|
|
|
- </span>
|
|
|
|
- </a-col>
|
|
|
|
- </a-row>
|
|
|
|
- </a-form>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <!-- 操作按钮区域 -->
|
|
|
|
- <div class="table-operator">
|
|
|
|
- <a-button @click="handleAdd" v-show="show" type="primary" icon="plus">新增</a-button>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <!-- table区域-begin -->
|
|
|
|
- <div>
|
|
|
|
- <a-table
|
|
|
|
- ref="table"
|
|
|
|
- size="middle"
|
|
|
|
- bordered
|
|
|
|
- rowKey="id"
|
|
|
|
- :columns="columns"
|
|
|
|
- :dataSource="dataSource"
|
|
|
|
- :pagination="ipagination"
|
|
|
|
- :loading="loading"
|
|
|
|
- >
|
|
|
|
- <!-- 字符串超长截取省略号显示-->
|
|
|
|
- <span slot="esContent" slot-scope="text">
|
|
|
|
- <j-ellipsis :value="text" :length="10" />
|
|
|
|
- </span>
|
|
|
|
-
|
|
|
|
- <span slot="action" slot-scope="text, record">
|
|
|
|
- <a href="javascript:;" @click="handleDetail(record)">详情</a>
|
|
|
|
- <a-divider type="vertical" />
|
|
|
|
- <a-dropdown>
|
|
|
|
- <a class="ant-dropdown-link">
|
|
|
|
- 更多
|
|
|
|
- <a-icon type="down" />
|
|
|
|
- </a>
|
|
|
|
- <a-menu slot="overlay">
|
|
|
|
- <a-menu-item v-show="show">
|
|
|
|
- <a @click="handleEdit(record)">编辑</a>
|
|
|
|
- </a-menu-item>
|
|
|
|
- </a-menu>
|
|
|
|
- </a-dropdown>
|
|
|
|
- <a-divider type="vertical" />
|
|
|
|
- <a href="javascript:;" @click="showDetail(record)">场地信息</a>
|
|
|
|
- </span>
|
|
|
|
- </a-table>
|
|
|
|
- </div>
|
|
|
|
- <!-- table区域-end -->
|
|
|
|
-
|
|
|
|
- <!-- 表单区域 -->
|
|
|
|
- <a-modal title="详情" v-model="detail" class="ping" :width="800">
|
|
|
|
- <a-tabs defaultActiveKey="1" @change="callback" v-model="indexDetail">
|
|
|
|
- <a-tab-pane tab="场地图集" key="1" forceRender>
|
|
|
|
- <div>
|
|
|
|
- <a type="primary" style="margin-left:10px" @click="addPhoto=true">新增场地图片</a>
|
|
|
|
- <ul class="actor-photo-list">
|
|
|
|
- <li v-for="(item,index) of photoList" :key="index">
|
|
|
|
- <a-icon
|
|
|
|
- type="close-circle"
|
|
|
|
- style="position:absolute;top:-5px;right:-5px;color:red;z-index:10;cursor: pointer;"
|
|
|
|
- @click="deteleImg(item.id)"
|
|
|
|
- />
|
|
|
|
- <img :src="item.photoUrl" alt />
|
|
|
|
- </li>
|
|
|
|
- </ul>
|
|
|
|
- </div>
|
|
|
|
- <div style="text-align:right">
|
|
|
|
- <a-pagination
|
|
|
|
- showQuickJumper
|
|
|
|
- :total="total"
|
|
|
|
- @change="pageChange"
|
|
|
|
- :pageSize.sync="pageSize"
|
|
|
|
- />
|
|
|
|
- </div>
|
|
|
|
- </a-tab-pane>
|
|
|
|
- <a-tab-pane tab="场地视频" key="2">
|
|
|
|
- <div>
|
|
|
|
- <a type="primary" style="margin-left:10px" @click="addVideo=true">新增场地视频</a>
|
|
|
|
- <ul class="actor-photo-list">
|
|
|
|
- <li v-for="(item,index) of videoList" :key="index">
|
|
|
|
- <a-icon
|
|
|
|
- type="close-circle"
|
|
|
|
- style="position:absolute;top:-5px;right:-5px;color:red;z-index:10;cursor: pointer;"
|
|
|
|
- @click="deteleVideo(item.id)"
|
|
|
|
- />
|
|
|
|
- <video
|
|
|
|
- class="video"
|
|
|
|
- :src="item.videoUrl"
|
|
|
|
- controls="controls"
|
|
|
|
- style="min-height:160px"
|
|
|
|
- >您的浏览器不支持 video 标签。</video>
|
|
|
|
- </li>
|
|
|
|
- </ul>
|
|
|
|
- </div>
|
|
|
|
- <div style="text-align:right">
|
|
|
|
- <a-pagination
|
|
|
|
- showQuickJumper
|
|
|
|
- :total="videoTotal"
|
|
|
|
- @change="pageChange"
|
|
|
|
- :pageSize.sync="pageSize"
|
|
|
|
- />
|
|
|
|
- </div>
|
|
|
|
- </a-tab-pane>
|
|
|
|
- </a-tabs>
|
|
|
|
- </a-modal>
|
|
|
|
-
|
|
|
|
- <!-- 新增图集 -->
|
|
|
|
- <a-modal
|
|
|
|
- v-model="addPhoto"
|
|
|
|
- title="新增图集"
|
|
|
|
- @ok="handleOk('photo')"
|
|
|
|
- @cancel="handleCancel('photo')"
|
|
|
|
- >
|
|
|
|
- <upload-to-ali
|
|
|
|
- style="margin:10px"
|
|
|
|
- v-model="imageUrl"
|
|
|
|
- :customDomain="customDomain"
|
|
|
|
- preview
|
|
|
|
- :region="region"
|
|
|
|
- :bucket="bucket"
|
|
|
|
- :accept="acceptImage"
|
|
|
|
- :max="1"
|
|
|
|
- :size="1024000"
|
|
|
|
- :accessKeyId="accessKeyId"
|
|
|
|
- :accessKeySecret="accessKeySecret"
|
|
|
|
- ></upload-to-ali>
|
|
|
|
- </a-modal>
|
|
|
|
- <!-- 新增作品 -->
|
|
|
|
- <a-modal
|
|
|
|
- v-model="addVideo"
|
|
|
|
- title="新增作品"
|
|
|
|
- @ok="handleOk('video')"
|
|
|
|
- @cancel="handleCancel('video')"
|
|
|
|
- >
|
|
|
|
- <upload-to-ali
|
|
|
|
- style="margin:10px"
|
|
|
|
- v-model="videoUrl"
|
|
|
|
- :customDomain="customDomain"
|
|
|
|
- preview
|
|
|
|
- :region="region"
|
|
|
|
- :bucket="bucket"
|
|
|
|
- :accept="acceptVideo"
|
|
|
|
- :max="1"
|
|
|
|
- :size="1024000"
|
|
|
|
- :accessKeyId="accessKeyId"
|
|
|
|
- :accessKeySecret="accessKeySecret"
|
|
|
|
- ></upload-to-ali>
|
|
|
|
- </a-modal>
|
|
|
|
-
|
|
|
|
- <yard-modal ref="modalForm" @ok="modalFormOk"></yard-modal>
|
|
|
|
- </a-card>
|
|
|
|
-</template>
|
|
|
|
-
|
|
|
|
-<script>
|
|
|
|
-import YardModal from './modules/YardModal'
|
|
|
|
-import yardDetail from './modules/yardDetail'
|
|
|
|
-import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
|
|
|
-import JEllipsis from '@/components/jeecg/JEllipsis'
|
|
|
|
-import UploadToAli from '@femessage/upload-to-ali'
|
|
|
|
-import { yardPhotoList, yardVideoList, yardPhotoDelete, yardVideoDelete, yardPhotoAdd, yardVideoAdd } from '@/api/yard'
|
|
|
|
-export default {
|
|
|
|
- name: 'YardList',
|
|
|
|
- mixins: [JeecgListMixin],
|
|
|
|
- components: {
|
|
|
|
- JEllipsis,
|
|
|
|
- YardModal,
|
|
|
|
- UploadToAli
|
|
|
|
- },
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- queryParam: {},
|
|
|
|
- description: '场地管理',
|
|
|
|
- // 新增修改按钮是否显示
|
|
|
|
- show: true,
|
|
|
|
- // 表头
|
|
|
|
- columns: [
|
|
|
|
- {
|
|
|
|
- title: 'ID',
|
|
|
|
- align: 'center',
|
|
|
|
- dataIndex: 'id'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '场地名称',
|
|
|
|
- align: 'center',
|
|
|
|
- dataIndex: 'buildingName'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '地址',
|
|
|
|
- align: 'center',
|
|
|
|
- dataIndex: 'address'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '联系人',
|
|
|
|
- align: 'center',
|
|
|
|
- dataIndex: 'contactName'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '联系电话',
|
|
|
|
- align: 'center',
|
|
|
|
- dataIndex: 'contactMobile'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '创建时间',
|
|
|
|
- align: 'center',
|
|
|
|
- dataIndex: 'createTime'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '操作',
|
|
|
|
- dataIndex: 'action',
|
|
|
|
- align: 'center',
|
|
|
|
- scopedSlots: { customRender: 'action' }
|
|
|
|
- }
|
|
|
|
- ],
|
|
|
|
- url: {
|
|
|
|
- list: '/ctop/yard/list'
|
|
|
|
- },
|
|
|
|
- detail: false,
|
|
|
|
- indexDetail: '1',
|
|
|
|
- currentPage: 0,
|
|
|
|
- pageSize: 4,
|
|
|
|
- videoTotal: 0,
|
|
|
|
- photoTotal: 0,
|
|
|
|
- total: 0,
|
|
|
|
- videoList: [],
|
|
|
|
- photoList: [],
|
|
|
|
- imageUrl: '',
|
|
|
|
- videoUrl: '',
|
|
|
|
- customDomain: '',
|
|
|
|
- region: 'oss-cn-beijing',
|
|
|
|
- bucket: 'ctop-media',
|
|
|
|
- acceptVideo: 'video/mpeg,video/mp4',
|
|
|
|
- acceptImage: 'image/jpeg,image/jpg,image/png',
|
|
|
|
- accessKeyId: 'LTAIbNbqWzSOklQV',
|
|
|
|
- accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
|
|
|
|
- addPhoto: false,
|
|
|
|
- addVideo: false,
|
|
|
|
- confirmLoading:true
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- methods: {
|
|
|
|
- showDetail(item) {
|
|
|
|
- console.log(item)
|
|
|
|
- this.detail = true
|
|
|
|
- this.id = item.id
|
|
|
|
- this.getPhoto()
|
|
|
|
- },
|
|
|
|
- callback(key) {
|
|
|
|
- console.log(key)
|
|
|
|
- if (key == '1') {
|
|
|
|
- this.currentPage = 1
|
|
|
|
- this.getPhoto()
|
|
|
|
- } else if (key == '2') {
|
|
|
|
- this.currentPage = 1
|
|
|
|
- this.getVideo()
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- pageChange: function(page) {
|
|
|
|
- console.log(page)
|
|
|
|
- this.currentPage = page
|
|
|
|
- if (this.indexDetail == '1') {
|
|
|
|
- this.getPhoto()
|
|
|
|
- } else if (this.indexDetail == '2') {
|
|
|
|
- this.getVideo()
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- getPhoto() {
|
|
|
|
- yardPhotoList({ pageNo: this.currentPage, pageSize: 4, yardId: this.id }).then(res => {
|
|
|
|
- if (res.code == 0) {
|
|
|
|
- console.log(res)
|
|
|
|
- this.photoList = res.result.records
|
|
|
|
- this.total = res.result.total
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- getVideo() {
|
|
|
|
- yardVideoList({ pageNo: this.currentPage, pageSize: 4, yardId: this.id }).then(res => {
|
|
|
|
- if (res.code == 0) {
|
|
|
|
- console.log(res)
|
|
|
|
- this.videoList = res.result.records
|
|
|
|
- this.videoTotal = res.result.total
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- handleOk(type) {
|
|
|
|
- const that = this
|
|
|
|
- if (type == 'photo') {
|
|
|
|
- yardPhotoAdd({ yardId: that.id, photoUrl: that.imageUrl })
|
|
|
|
- .then(res => {
|
|
|
|
- if (res.success) {
|
|
|
|
- this.getPhoto()
|
|
|
|
- this.handleCancel('photo')
|
|
|
|
- } else {
|
|
|
|
- that.$message.warning(res.message)
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- .finally(() => {
|
|
|
|
- that.confirmLoading = false
|
|
|
|
- that.handleCancel('photo')
|
|
|
|
- })
|
|
|
|
- } else {
|
|
|
|
- yardVideoAdd({ yardId: that.id, videoUrl: that.videoUrl })
|
|
|
|
- .then(res => {
|
|
|
|
- if (res.success) {
|
|
|
|
- this.getVideo()
|
|
|
|
- this.handleCancel('video')
|
|
|
|
- } else {
|
|
|
|
- that.$message.warning(res.message)
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- .finally(() => {
|
|
|
|
- that.confirmLoading = false
|
|
|
|
- that.handleCancel('video')
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- handleCancel(type) {
|
|
|
|
- if (type == 'photo') {
|
|
|
|
- this.imageUrl = ''
|
|
|
|
- this.addPhoto = false
|
|
|
|
- } else {
|
|
|
|
- this.videoUrl = ''
|
|
|
|
- this.addVideo = false
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- deteleImg(id) {
|
|
|
|
- yardPhotoDelete({ id: id }).then(res => {
|
|
|
|
- if (res.code == 200) {
|
|
|
|
- console.log(res)
|
|
|
|
- this.getPhoto()
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- deteleVideo(id) {
|
|
|
|
- yardVideoDelete({ id: id }).then(res => {
|
|
|
|
- if (res.code == 200) {
|
|
|
|
- console.log(res)
|
|
|
|
- this.getVideo()
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-</script>
|
|
|
|
-<style scoped>
|
|
|
|
-@import '~@assets/less/common.less';
|
|
|
|
|
|
+<style>
|
|
|
|
+.ping .ant-modal-content .ant-modal-footer {
|
|
|
|
+ display: none !important;
|
|
|
|
+}
|
|
|
|
+.ant-modal-body {
|
|
|
|
+ padding-top: 0px;
|
|
|
|
+}
|
|
|
|
+li {
|
|
|
|
+ list-style-type: none;
|
|
|
|
+}
|
|
|
|
+</style>
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.actor-photo-list {
|
|
|
|
+ display: flex;
|
|
|
|
+ padding-left: 0;
|
|
|
|
+ li {
|
|
|
|
+ width: 25%;
|
|
|
|
+ margin: 10px;
|
|
|
|
+ position: relative;
|
|
|
|
+ height: 250px;
|
|
|
|
+ border: 1px solid #f2f2f2;
|
|
|
|
+ img,
|
|
|
|
+ video {
|
|
|
|
+ width: 100%;
|
|
|
|
+ margin-top: auto;
|
|
|
|
+ margin-bottom: auto;
|
|
|
|
+ top: 0;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ position: absolute;
|
|
|
|
+ max-height: 250px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|
|
|
|
+<template>
|
|
|
|
+ <a-card :bordered="false">
|
|
|
|
+ <!-- 查询区域 -->
|
|
|
|
+ <div class="table-page-search-wrapper">
|
|
|
|
+ <a-form layout="inline">
|
|
|
|
+ <a-row :gutter="24">
|
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
|
+ <a-form-item label="场地名称">
|
|
|
|
+ <a-input placeholder="请输入场地名称" v-model="queryParam.buildingName"></a-input>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </a-col>
|
|
|
|
+
|
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
|
+ <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
|
|
|
+ <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
|
|
|
+ <a-button
|
|
|
|
+ type="primary"
|
|
|
|
+ @click="searchReset"
|
|
|
|
+ icon="reload"
|
|
|
|
+ style="margin-left: 8px"
|
|
|
|
+ >重置</a-button>
|
|
|
|
+ </span>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ </a-form>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <!-- 操作按钮区域 -->
|
|
|
|
+ <div class="table-operator">
|
|
|
|
+ <a-button @click="handleAdd" v-show="show" type="primary" icon="plus">新增</a-button>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <!-- table区域-begin -->
|
|
|
|
+ <div>
|
|
|
|
+ <a-table
|
|
|
|
+ ref="table"
|
|
|
|
+ size="middle"
|
|
|
|
+ bordered
|
|
|
|
+ rowKey="id"
|
|
|
|
+ :columns="columns"
|
|
|
|
+ :dataSource="dataSource"
|
|
|
|
+ :pagination="ipagination"
|
|
|
|
+ :loading="loading"
|
|
|
|
+ >
|
|
|
|
+ <!-- 字符串超长截取省略号显示-->
|
|
|
|
+ <span slot="esContent" slot-scope="text">
|
|
|
|
+ <j-ellipsis :value="text" :length="10" />
|
|
|
|
+ </span>
|
|
|
|
+
|
|
|
|
+ <span slot="action" slot-scope="text, record">
|
|
|
|
+ <a href="javascript:;" @click="handleDetail(record)">详情</a>
|
|
|
|
+ <a-divider type="vertical" />
|
|
|
|
+ <a-dropdown>
|
|
|
|
+ <a class="ant-dropdown-link">
|
|
|
|
+ 更多
|
|
|
|
+ <a-icon type="down" />
|
|
|
|
+ </a>
|
|
|
|
+ <a-menu slot="overlay">
|
|
|
|
+ <a-menu-item v-show="show">
|
|
|
|
+ <a @click="handleEdit(record)">编辑</a>
|
|
|
|
+ </a-menu-item>
|
|
|
|
+ </a-menu>
|
|
|
|
+ </a-dropdown>
|
|
|
|
+ <a-divider type="vertical" />
|
|
|
|
+ <a href="javascript:;" @click="showDetail(record)">场地信息</a>
|
|
|
|
+ </span>
|
|
|
|
+ </a-table>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- table区域-end -->
|
|
|
|
+
|
|
|
|
+ <!-- 表单区域 -->
|
|
|
|
+ <a-modal title="详情" v-model="detail" class="ping" :width="800">
|
|
|
|
+ <a-tabs defaultActiveKey="1" @change="callback" v-model="indexDetail">
|
|
|
|
+ <a-tab-pane tab="场地图集" key="1" forceRender>
|
|
|
|
+ <div>
|
|
|
|
+ <a type="primary" style="margin-left:10px" @click="addPhoto=true">新增场地图片</a>
|
|
|
|
+ <ul class="actor-photo-list">
|
|
|
|
+ <li v-for="(item,index) of photoList" :key="index">
|
|
|
|
+ <a-icon
|
|
|
|
+ type="close-circle"
|
|
|
|
+ style="position:absolute;top:-5px;right:-5px;color:red;z-index:10;cursor: pointer;"
|
|
|
|
+ @click="deteleImg(item.id)"
|
|
|
|
+ />
|
|
|
|
+ <img :src="item.photoUrl" alt />
|
|
|
|
+ </li>
|
|
|
|
+ </ul>
|
|
|
|
+ </div>
|
|
|
|
+ <div style="text-align:right">
|
|
|
|
+ <a-pagination
|
|
|
|
+ showQuickJumper
|
|
|
|
+ :total="total"
|
|
|
|
+ @change="pageChange"
|
|
|
|
+ :pageSize.sync="pageSize"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ </a-tab-pane>
|
|
|
|
+ <a-tab-pane tab="场地视频" key="2">
|
|
|
|
+ <div>
|
|
|
|
+ <a type="primary" style="margin-left:10px" @click="addVideo=true">新增场地视频</a>
|
|
|
|
+ <ul class="actor-photo-list">
|
|
|
|
+ <li v-for="(item,index) of videoList" :key="index">
|
|
|
|
+ <a-icon
|
|
|
|
+ type="close-circle"
|
|
|
|
+ style="position:absolute;top:-5px;right:-5px;color:red;z-index:10;cursor: pointer;"
|
|
|
|
+ @click="deteleVideo(item.id)"
|
|
|
|
+ />
|
|
|
|
+ <video
|
|
|
|
+ class="video"
|
|
|
|
+ :src="item.videoUrl"
|
|
|
|
+ controls="controls"
|
|
|
|
+ style="min-height:160px"
|
|
|
|
+ >您的浏览器不支持 video 标签。</video>
|
|
|
|
+ </li>
|
|
|
|
+ </ul>
|
|
|
|
+ </div>
|
|
|
|
+ <div style="text-align:right">
|
|
|
|
+ <a-pagination
|
|
|
|
+ showQuickJumper
|
|
|
|
+ :total="videoTotal"
|
|
|
|
+ @change="pageChange"
|
|
|
|
+ :pageSize.sync="pageSize"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ </a-tab-pane>
|
|
|
|
+ </a-tabs>
|
|
|
|
+ </a-modal>
|
|
|
|
+
|
|
|
|
+ <!-- 新增图集 -->
|
|
|
|
+ <a-modal
|
|
|
|
+ v-model="addPhoto"
|
|
|
|
+ title="新增图集"
|
|
|
|
+ @ok="handleOk('photo')"
|
|
|
|
+ @cancel="handleCancel('photo')"
|
|
|
|
+ >
|
|
|
|
+ <upload-to-ali
|
|
|
|
+ style="margin:10px"
|
|
|
|
+ v-model="imageUrl"
|
|
|
|
+ :customDomain="customDomain"
|
|
|
|
+ preview
|
|
|
|
+ :region="region"
|
|
|
|
+ :bucket="bucket"
|
|
|
|
+ :accept="acceptImage"
|
|
|
|
+ :max="1"
|
|
|
|
+ :size="1024000"
|
|
|
|
+ :accessKeyId="accessKeyId"
|
|
|
|
+ :accessKeySecret="accessKeySecret"
|
|
|
|
+ ></upload-to-ali>
|
|
|
|
+ </a-modal>
|
|
|
|
+ <!-- 新增作品 -->
|
|
|
|
+ <a-modal
|
|
|
|
+ v-model="addVideo"
|
|
|
|
+ title="新增作品"
|
|
|
|
+ @ok="handleOk('video')"
|
|
|
|
+ @cancel="handleCancel('video')"
|
|
|
|
+ >
|
|
|
|
+ <upload-to-ali
|
|
|
|
+ style="margin:10px"
|
|
|
|
+ v-model="videoUrl"
|
|
|
|
+ :customDomain="customDomain"
|
|
|
|
+ preview
|
|
|
|
+ :region="region"
|
|
|
|
+ :bucket="bucket"
|
|
|
|
+ :accept="acceptVideo"
|
|
|
|
+ :max="1"
|
|
|
|
+ :size="1024000"
|
|
|
|
+ :accessKeyId="accessKeyId"
|
|
|
|
+ :accessKeySecret="accessKeySecret"
|
|
|
|
+ ></upload-to-ali>
|
|
|
|
+ </a-modal>
|
|
|
|
+
|
|
|
|
+ <yard-modal ref="modalForm" @ok="modalFormOk"></yard-modal>
|
|
|
|
+ </a-card>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import YardModal from './modules/YardModal'
|
|
|
|
+import yardDetail from './modules/yardDetail'
|
|
|
|
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
|
|
|
+import JEllipsis from '@/components/jeecg/JEllipsis'
|
|
|
|
+import UploadToAli from '@femessage/upload-to-ali'
|
|
|
|
+import { yardPhotoList, yardVideoList, yardPhotoDelete, yardVideoDelete, yardPhotoAdd, yardVideoAdd } from '@/api/yard'
|
|
|
|
+export default {
|
|
|
|
+ name: 'YardList',
|
|
|
|
+ mixins: [JeecgListMixin],
|
|
|
|
+ components: {
|
|
|
|
+ JEllipsis,
|
|
|
|
+ YardModal,
|
|
|
|
+ UploadToAli
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ queryParam: {},
|
|
|
|
+ description: '场地管理',
|
|
|
|
+ // 新增修改按钮是否显示
|
|
|
|
+ show: true,
|
|
|
|
+ // 表头
|
|
|
|
+ columns: [
|
|
|
|
+ {
|
|
|
|
+ title: 'ID',
|
|
|
|
+ align: 'center',
|
|
|
|
+ dataIndex: 'id'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '场地名称',
|
|
|
|
+ align: 'center',
|
|
|
|
+ dataIndex: 'buildingName'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '地址',
|
|
|
|
+ align: 'center',
|
|
|
|
+ dataIndex: 'address'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '联系人',
|
|
|
|
+ align: 'center',
|
|
|
|
+ dataIndex: 'contactName'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '联系电话',
|
|
|
|
+ align: 'center',
|
|
|
|
+ dataIndex: 'contactMobile'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '创建时间',
|
|
|
|
+ align: 'center',
|
|
|
|
+ dataIndex: 'createTime'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '操作',
|
|
|
|
+ dataIndex: 'action',
|
|
|
|
+ align: 'center',
|
|
|
|
+ scopedSlots: { customRender: 'action' }
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ url: {
|
|
|
|
+ list: '/ctop/yard/list'
|
|
|
|
+ },
|
|
|
|
+ detail: false,
|
|
|
|
+ indexDetail: '1',
|
|
|
|
+ currentPage: 0,
|
|
|
|
+ pageSize: 4,
|
|
|
|
+ videoTotal: 0,
|
|
|
|
+ photoTotal: 0,
|
|
|
|
+ total: 0,
|
|
|
|
+ videoList: [],
|
|
|
|
+ photoList: [],
|
|
|
|
+ imageUrl: '',
|
|
|
|
+ videoUrl: '',
|
|
|
|
+ customDomain: '',
|
|
|
|
+ region: 'oss-cn-beijing',
|
|
|
|
+ bucket: 'ctop-media',
|
|
|
|
+ acceptVideo: 'video/mpeg,video/mp4',
|
|
|
|
+ acceptImage: 'image/jpeg,image/jpg,image/png',
|
|
|
|
+ accessKeyId: 'LTAIbNbqWzSOklQV',
|
|
|
|
+ accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
|
|
|
|
+ addPhoto: false,
|
|
|
|
+ addVideo: false,
|
|
|
|
+ confirmLoading:true
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ methods: {
|
|
|
|
+ showDetail(item) {
|
|
|
|
+ console.log(item)
|
|
|
|
+ this.detail = true
|
|
|
|
+ this.id = item.id
|
|
|
|
+ this.getPhoto()
|
|
|
|
+ },
|
|
|
|
+ callback(key) {
|
|
|
|
+ console.log(key)
|
|
|
|
+ if (key == '1') {
|
|
|
|
+ this.currentPage = 1
|
|
|
|
+ this.getPhoto()
|
|
|
|
+ } else if (key == '2') {
|
|
|
|
+ this.currentPage = 1
|
|
|
|
+ this.getVideo()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ pageChange: function(page) {
|
|
|
|
+ console.log(page)
|
|
|
|
+ this.currentPage = page
|
|
|
|
+ if (this.indexDetail == '1') {
|
|
|
|
+ this.getPhoto()
|
|
|
|
+ } else if (this.indexDetail == '2') {
|
|
|
|
+ this.getVideo()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ getPhoto() {
|
|
|
|
+ yardPhotoList({ pageNo: this.currentPage, pageSize: 4, yardId: this.id }).then(res => {
|
|
|
|
+ if (res.code == 0) {
|
|
|
|
+ console.log(res)
|
|
|
|
+ this.photoList = res.result.records
|
|
|
|
+ this.total = res.result.total
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getVideo() {
|
|
|
|
+ yardVideoList({ pageNo: this.currentPage, pageSize: 4, yardId: this.id }).then(res => {
|
|
|
|
+ if (res.code == 0) {
|
|
|
|
+ console.log(res)
|
|
|
|
+ this.videoList = res.result.records
|
|
|
|
+ this.videoTotal = res.result.total
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ handleOk(type) {
|
|
|
|
+ const that = this
|
|
|
|
+ if (type == 'photo') {
|
|
|
|
+ yardPhotoAdd({ yardId: that.id, photoUrl: that.imageUrl })
|
|
|
|
+ .then(res => {
|
|
|
|
+ if (res.success) {
|
|
|
|
+ this.getPhoto()
|
|
|
|
+ this.handleCancel('photo')
|
|
|
|
+ } else {
|
|
|
|
+ that.$message.warning(res.message)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ .finally(() => {
|
|
|
|
+ that.confirmLoading = false
|
|
|
|
+ that.handleCancel('photo')
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ yardVideoAdd({ yardId: that.id, videoUrl: that.videoUrl })
|
|
|
|
+ .then(res => {
|
|
|
|
+ if (res.success) {
|
|
|
|
+ this.getVideo()
|
|
|
|
+ this.handleCancel('video')
|
|
|
|
+ } else {
|
|
|
|
+ that.$message.warning(res.message)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ .finally(() => {
|
|
|
|
+ that.confirmLoading = false
|
|
|
|
+ that.handleCancel('video')
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ handleCancel(type) {
|
|
|
|
+ if (type == 'photo') {
|
|
|
|
+ this.imageUrl = ''
|
|
|
|
+ this.addPhoto = false
|
|
|
|
+ } else {
|
|
|
|
+ this.videoUrl = ''
|
|
|
|
+ this.addVideo = false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ deteleImg(id) {
|
|
|
|
+ yardPhotoDelete({ id: id }).then(res => {
|
|
|
|
+ if (res.code == 200) {
|
|
|
|
+ console.log(res)
|
|
|
|
+ this.getPhoto()
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ deteleVideo(id) {
|
|
|
|
+ yardVideoDelete({ id: id }).then(res => {
|
|
|
|
+ if (res.code == 200) {
|
|
|
|
+ console.log(res)
|
|
|
|
+ this.getVideo()
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+<style scoped>
|
|
|
|
+@import '~@assets/less/common.less';
|
|
</style>
|
|
</style>
|