|
@@ -54,13 +54,14 @@
|
|
<!-- 操作按钮区域 -->
|
|
<!-- 操作按钮区域 -->
|
|
<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>
|
|
|
|
+ <a-pagination showQuickJumper :total="ipagination.total" v-model="ipagination.current" style="float:right" @change="totalpageChange" :pageSize.sync="ipagination.pageSize" />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- table区域-begin -->
|
|
<!-- table区域-begin -->
|
|
<div>
|
|
<div>
|
|
- <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
|
|
|
|
|
|
+ <!-- <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
|
|
:pagination="ipagination" :loading="loading">
|
|
:pagination="ipagination" :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>
|
|
@@ -87,7 +88,29 @@
|
|
<a-divider type="vertical" />
|
|
<a-divider type="vertical" />
|
|
<a href="javascript:;" @click="showDetail(record)">场地信息</a>
|
|
<a href="javascript:;" @click="showDetail(record)">场地信息</a>
|
|
</span>
|
|
</span>
|
|
- </a-table>
|
|
|
|
|
|
+ </a-table> -->
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <a-row class="image-list" :gutter="16" style="padding:0 8px">
|
|
|
|
+ <a-col :lg="6" :sm="12" class="vm-margin" style="padding:0" v-for="(item, index) of dataSource" :key="index" >
|
|
|
|
+ <vm-card
|
|
|
|
+ style="margin: 0 15px;"
|
|
|
|
+ :editable="true"
|
|
|
|
+ :title="item.buildingName"
|
|
|
|
+ :img="item.coverUrl"
|
|
|
|
+ :desc="item.address"
|
|
|
|
+ :detailUrl="item.videoUrl"
|
|
|
|
+ :editUrl="item.editUrl"
|
|
|
|
+ pageTitle='场地列表'
|
|
|
|
+ :id="item.id"
|
|
|
|
+ :record="item"
|
|
|
|
+ @delete-ok="deleteOk(item)"
|
|
|
|
+ @showDetail='showDetail(item)'
|
|
|
|
+ @editDetail='handleEdit(item)'
|
|
|
|
+ @updateList='updateList(1)'
|
|
|
|
+ ></vm-card>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
</div>
|
|
</div>
|
|
<!-- table区域-end -->
|
|
<!-- table区域-end -->
|
|
|
|
|
|
@@ -97,6 +120,7 @@
|
|
</a-modal>
|
|
</a-modal>
|
|
<a-modal title="详情" v-model="detail" class="ping" :footer="null" :width="800" style="overflow:hidden">
|
|
<a-modal title="详情" v-model="detail" class="ping" :footer="null" :width="800" style="overflow:hidden">
|
|
<a-tabs defaultActiveKey="1" @change="callback" v-model="indexDetail">
|
|
<a-tabs defaultActiveKey="1" @change="callback" v-model="indexDetail">
|
|
|
|
+
|
|
<a-tab-pane tab="场地图集" key="1" forceRender>
|
|
<a-tab-pane tab="场地图集" key="1" forceRender>
|
|
<div>
|
|
<div>
|
|
<a type="primary" style="margin-left:10px" @click="addPhoto=true">新增场地图片</a>
|
|
<a type="primary" style="margin-left:10px" @click="addPhoto=true">新增场地图片</a>
|
|
@@ -113,7 +137,31 @@
|
|
<a-pagination showQuickJumper size="small" :total="total" @change="pageChange" :pageSize.sync="pageSize" />
|
|
<a-pagination showQuickJumper size="small" :total="total" @change="pageChange" :pageSize.sync="pageSize" />
|
|
</div>
|
|
</div>
|
|
</a-tab-pane>
|
|
</a-tab-pane>
|
|
- <a-tab-pane tab="场地视频" key="2">
|
|
|
|
|
|
+ <a-tab-pane tab="场地信息" key="2">
|
|
|
|
+ <div style="display:flex;flex-direction:row;height:300px;">
|
|
|
|
+ <div
|
|
|
|
+ style="height:200px;width:30%;border:1px solid #f2f2f2;"
|
|
|
|
+ :style="{backgroundImage: imageUrl?'url(' +imageUrl+')':'url('+noImgUrl+')', backgroundSize:'contain', backgroundRepeat: 'no-repeat',backgroundPosition:'center center'}"
|
|
|
|
+ ></div>
|
|
|
|
+ <div style="flex:1;margin:15px">
|
|
|
|
+ <a-form >
|
|
|
|
+ <a-form-item label="场地名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
|
|
|
|
+ <span>{{currentYard.buildingName}}</span>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item label="场地地址" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
|
|
|
|
+ <span>{{currentYard.address}}</span>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item label="联系人名" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
|
|
|
|
+ <span>{{currentYard.contactName}}</span>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item label="联系电话" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
|
|
|
|
+ <span>{{currentYard.contactMobile}}</span>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </a-form>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a-tab-pane>
|
|
|
|
+ <a-tab-pane tab="场地视频" key="3">
|
|
<div>
|
|
<div>
|
|
<a type="primary" style="margin-left:10px" @click="addVideo=true">新增场地视频</a>
|
|
<a type="primary" style="margin-left:10px" @click="addVideo=true">新增场地视频</a>
|
|
<ul class="actor-photo-list">
|
|
<ul class="actor-photo-list">
|
|
@@ -156,6 +204,7 @@
|
|
<script>
|
|
<script>
|
|
import YardModal from './modules/YardModal'
|
|
import YardModal from './modules/YardModal'
|
|
import yardDetail from './modules/yardDetail'
|
|
import yardDetail from './modules/yardDetail'
|
|
|
|
+ import VmCard from '@/components/ctop/vm-card'
|
|
import {
|
|
import {
|
|
JeecgListMixin
|
|
JeecgListMixin
|
|
} from '@/mixins/JeecgListMixin'
|
|
} from '@/mixins/JeecgListMixin'
|
|
@@ -168,7 +217,8 @@
|
|
yardPhotoDelete,
|
|
yardPhotoDelete,
|
|
yardVideoDelete,
|
|
yardVideoDelete,
|
|
yardPhotoAdd,
|
|
yardPhotoAdd,
|
|
- yardVideoAdd
|
|
|
|
|
|
+ yardVideoAdd,
|
|
|
|
+ yardListDelete
|
|
} from '@/api/yard'
|
|
} from '@/api/yard'
|
|
export default {
|
|
export default {
|
|
name: 'YardList',
|
|
name: 'YardList',
|
|
@@ -177,10 +227,31 @@
|
|
JEllipsis,
|
|
JEllipsis,
|
|
YardModal,
|
|
YardModal,
|
|
UploadToAli,
|
|
UploadToAli,
|
|
- uploadFile
|
|
|
|
|
|
+ uploadFile,
|
|
|
|
+ VmCard
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ ipagination: {
|
|
|
|
+ current: 1,
|
|
|
|
+ pageSize: 8,
|
|
|
|
+ // pageSizeOptions: ['10', '20', '30'],
|
|
|
|
+ showTotal: (total, range) => {
|
|
|
|
+ return range[0] + "-" + range[1] + " 共" + total + "条"
|
|
|
|
+ },
|
|
|
|
+ showQuickJumper: true,
|
|
|
|
+ showSizeChanger:true,
|
|
|
|
+ pageSizeOptions: ['10', '30', '50'],
|
|
|
|
+ total: 0,
|
|
|
|
+ onChange: (current, pageSize) => {
|
|
|
|
+ // 切换分页时的回调,
|
|
|
|
+ // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
|
|
|
|
+ this.ipagination.current = current;
|
|
|
|
+ this.ipagination.pageSize= pageSize;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ noImgUrl:require('@/assets/img/noImg.png'),
|
|
queryParam: {},
|
|
queryParam: {},
|
|
description: '场地管理',
|
|
description: '场地管理',
|
|
// 新增修改按钮是否显示
|
|
// 新增修改按钮是否显示
|
|
@@ -251,13 +322,20 @@
|
|
accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
|
|
accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
|
|
addPhoto: false,
|
|
addPhoto: false,
|
|
addVideo: false,
|
|
addVideo: false,
|
|
- confirmLoading: true
|
|
|
|
|
|
+ confirmLoading: true,
|
|
|
|
+ currentYard:{},
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
methods: {
|
|
methods: {
|
|
|
|
+ totalpageChange(page){
|
|
|
|
+ console.log(page)
|
|
|
|
+ this.ipagination.current=page;
|
|
|
|
+ this.loadData(this.ipagination.current)
|
|
|
|
+ },
|
|
showDetail(item) {
|
|
showDetail(item) {
|
|
console.log(item)
|
|
console.log(item)
|
|
|
|
+ this.currentYard=item
|
|
this.detail = true
|
|
this.detail = true
|
|
this.id = item.id
|
|
this.id = item.id
|
|
// this.currentPage = 1
|
|
// this.currentPage = 1
|
|
@@ -382,7 +460,31 @@
|
|
this.getVideo()
|
|
this.getVideo()
|
|
}
|
|
}
|
|
})
|
|
})
|
|
- }
|
|
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ deleteOk: function (data) {
|
|
|
|
+ console.log('最外层deleteFn执行',data)
|
|
|
|
+ yardListDelete({
|
|
|
|
+ id:data.id
|
|
|
|
+ }).then(res=>{
|
|
|
|
+ if(res.success){
|
|
|
|
+ this.$message.success('删除成功')
|
|
|
|
+ for (let i = 0; i < this.dataSource.length; i++) {
|
|
|
|
+ if (this.dataSource[i].id === data.id) {
|
|
|
|
+ this.dataSource.splice(i, 1)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ // this.getActorList(data.page)
|
|
|
|
+ }else{
|
|
|
|
+ this.$message.error('删除失败,稍后再试')
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ updateList(page){
|
|
|
|
+ this.totalpageChange(page)
|
|
|
|
+ },
|
|
|
|
+
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|