|
@@ -1,6 +1,39 @@
|
|
|
|
+<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>
|
|
<template>
|
|
<a-card :bordered="false">
|
|
<a-card :bordered="false">
|
|
-
|
|
|
|
<!-- 查询区域 -->
|
|
<!-- 查询区域 -->
|
|
<div class="table-page-search-wrapper">
|
|
<div class="table-page-search-wrapper">
|
|
<a-form layout="inline">
|
|
<a-form layout="inline">
|
|
@@ -14,10 +47,14 @@
|
|
<a-col :md="6" :sm="8">
|
|
<a-col :md="6" :sm="8">
|
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
|
<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="searchQuery" icon="search">查询</a-button>
|
|
- <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
|
|
|
|
|
+ <a-button
|
|
|
|
+ type="primary"
|
|
|
|
+ @click="searchReset"
|
|
|
|
+ icon="reload"
|
|
|
|
+ style="margin-left: 8px"
|
|
|
|
+ >重置</a-button>
|
|
</span>
|
|
</span>
|
|
</a-col>
|
|
</a-col>
|
|
-
|
|
|
|
</a-row>
|
|
</a-row>
|
|
</a-form>
|
|
</a-form>
|
|
</div>
|
|
</div>
|
|
@@ -25,12 +62,10 @@
|
|
<!-- 操作按钮区域 -->
|
|
<!-- 操作按钮区域 -->
|
|
<div class="table-operator">
|
|
<div class="table-operator">
|
|
<a-button @click="handleAdd" v-show="show" type="primary" icon="plus">新增</a-button>
|
|
<a-button @click="handleAdd" v-show="show" type="primary" icon="plus">新增</a-button>
|
|
-
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- table区域-begin -->
|
|
<!-- table区域-begin -->
|
|
<div>
|
|
<div>
|
|
-
|
|
|
|
<a-table
|
|
<a-table
|
|
ref="table"
|
|
ref="table"
|
|
size="middle"
|
|
size="middle"
|
|
@@ -39,101 +74,329 @@
|
|
:columns="columns"
|
|
:columns="columns"
|
|
:dataSource="dataSource"
|
|
:dataSource="dataSource"
|
|
:pagination="ipagination"
|
|
:pagination="ipagination"
|
|
- :loading="loading">
|
|
|
|
-
|
|
|
|
|
|
+ :loading="loading"
|
|
|
|
+ >
|
|
<!-- 字符串超长截取省略号显示-->
|
|
<!-- 字符串超长截取省略号显示-->
|
|
<span slot="esContent" slot-scope="text">
|
|
<span slot="esContent" slot-scope="text">
|
|
- <j-ellipsis :value="text" :length="10"/>
|
|
|
|
|
|
+ <j-ellipsis :value="text" :length="10" />
|
|
</span>
|
|
</span>
|
|
|
|
|
|
<span slot="action" slot-scope="text, record">
|
|
<span slot="action" slot-scope="text, record">
|
|
<a href="javascript:;" @click="handleDetail(record)">详情</a>
|
|
<a href="javascript:;" @click="handleDetail(record)">详情</a>
|
|
- <a-divider type="vertical"/>
|
|
|
|
|
|
+ <a-divider type="vertical" />
|
|
<a-dropdown>
|
|
<a-dropdown>
|
|
- <a class="ant-dropdown-link">更多<a-icon type="down"/></a>
|
|
|
|
|
|
+ <a class="ant-dropdown-link">
|
|
|
|
+ 更多
|
|
|
|
+ <a-icon type="down" />
|
|
|
|
+ </a>
|
|
<a-menu slot="overlay">
|
|
<a-menu slot="overlay">
|
|
- <a-menu-item v-show="show">
|
|
|
|
|
|
+ <a-menu-item v-show="show">
|
|
<a @click="handleEdit(record)">编辑</a>
|
|
<a @click="handleEdit(record)">编辑</a>
|
|
</a-menu-item>
|
|
</a-menu-item>
|
|
</a-menu>
|
|
</a-menu>
|
|
</a-dropdown>
|
|
</a-dropdown>
|
|
|
|
+ <a-divider type="vertical" />
|
|
|
|
+ <a href="javascript:;" @click="showDetail(record)">场地信息</a>
|
|
</span>
|
|
</span>
|
|
-
|
|
|
|
</a-table>
|
|
</a-table>
|
|
</div>
|
|
</div>
|
|
<!-- table区域-end -->
|
|
<!-- 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>
|
|
<yard-modal ref="modalForm" @ok="modalFormOk"></yard-modal>
|
|
</a-card>
|
|
</a-card>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
- import YardModal from './modules/YardModal'
|
|
|
|
- import {JeecgListMixin} from '@/mixins/JeecgListMixin'
|
|
|
|
- import JEllipsis from "@/components/jeecg/JEllipsis";
|
|
|
|
|
|
+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
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
|
|
- export default {
|
|
|
|
- name: "YardList",
|
|
|
|
- mixins: [JeecgListMixin],
|
|
|
|
- components: {
|
|
|
|
- JEllipsis,
|
|
|
|
- YardModal
|
|
|
|
|
|
+ methods: {
|
|
|
|
+ showDetail(item) {
|
|
|
|
+ console.log(item)
|
|
|
|
+ this.detail = true
|
|
|
|
+ this.id = item.id
|
|
|
|
+ this.getPhoto()
|
|
},
|
|
},
|
|
- 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",
|
|
|
|
- },
|
|
|
|
|
|
+ callback(key) {
|
|
|
|
+ console.log(key)
|
|
|
|
+ if (key == '1') {
|
|
|
|
+ this.currentPage = 1
|
|
|
|
+ this.getPhoto()
|
|
|
|
+ } else if (key == '2') {
|
|
|
|
+ this.currentPage = 1
|
|
|
|
+ this.getVideo()
|
|
}
|
|
}
|
|
},
|
|
},
|
|
-
|
|
|
|
- methods: {}
|
|
|
|
|
|
+ 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>
|
|
</script>
|
|
<style scoped>
|
|
<style scoped>
|
|
- @import '~@assets/less/common.less'
|
|
|
|
|
|
+@import '~@assets/less/common.less';
|
|
</style>
|
|
</style>
|