Bladeren bron

增加场地管理页面

xuzuoyun 5 jaren geleden
bovenliggende
commit
940a56c841

+ 2 - 0
package.json

@@ -17,12 +17,14 @@
     "ant-design-vue": "^1.3.9",
     "apexcharts": "^3.6.5",
     "axios": "^0.18.0",
+    "babel-loader": "^8.0.6",
     "blueimp-md5": "^2.11.0",
     "clipboard": "^2.0.4",
     "codemirror": "^5.46.0",
     "dayjs": "^1.8.0",
     "enquire.js": "^2.1.6",
     "html2canvas": "^1.0.0-rc.3",
+    "iview": "2.0.0-rc.17",
     "jquery": "^3.4.1",
     "js-cookie": "^2.2.0",
     "lodash.get": "^4.4.2",

BIN
src/assets/img/img-1.jpg


BIN
src/assets/img/img-2.jpg


BIN
src/assets/img/img-3.jpg


BIN
src/assets/img/img-4.jpg


BIN
src/assets/img/img-l-1.jpg


BIN
src/assets/img/img-l-2.jpg


BIN
src/assets/img/login-bg.jpg


BIN
src/assets/img/logo.png


BIN
src/assets/img/logo_vmeditor.png


BIN
src/assets/img/photo.jpg


+ 65 - 0
src/components/ctop/vm-card.vue

@@ -0,0 +1,65 @@
+<template>
+  <div :class="[type === 'horizantal' ? 'vm-card-horizantal' : 'vm-card-vertical' , 'vm-panel']">
+    <div class="card-img" style="height: 250px">
+      <img :src="img" alt="" height="250">
+      <div v-if="editable && type == 'vertical'" class="control">
+        <span class="edit">
+          <a :href="editUrl">
+            <a-icon type="edit"></a-icon>
+          </a>     
+        </span>
+        <span class="delete">
+            <a-icon type="message"></a-icon>
+        </span>
+      </div>
+    </div>
+    <div class="card-desc panel-body">
+      <h2>{{ title }}</h2>
+      <p>{{ desc }}</p>
+      <a :href="detailUrl">
+        详情 >
+      </a>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'VmCard',
+    props: {
+      type: {
+        type: String,
+        default: 'vertical'
+      },
+      editable: {
+        type: Boolean,
+        default: false
+      },
+      title: {
+        type: String,
+        default: 'Title'
+      },
+      img: {
+        type: String,
+        default: require('@/assets/img/img-1.jpg')
+      },
+      desc: {
+        type: String,
+        default: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry,Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s'
+      },
+      detailUrl: {
+        type: String,
+        default: '#'
+      },
+      editUrl: {
+        type: String,
+        default: '#'
+      }
+    },
+    data: function () {
+
+    },
+    methods: {
+
+    }
+  }
+</script>

+ 105 - 0
src/components/ctop/vm-image-list.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="vm-image-list">
+    <a-row class="image-list-heading vm-panel">
+      <div class="panel-heading">
+        {{ title }}
+      </div>
+      <a-row type="flex" align="middle" justify="space-between" class="panel-body">
+       <div class="search-bar">
+          <a-input placeholder="请输入搜索内容" v-model="keyword" style="width: 300px"></a-input>
+<!--          <Button type="ghost" @click="search"><i class="fa fa-search"></i></Button>-->
+        </div>
+        <a-row type="flex" align="middle" class="page">
+          <span>第</span>
+          <a-input :max="40" :min="1" :number="true" v-model="showNum" class="input-number" @change="updateDataShow"></a-input>
+          <span class="margin-end">/ 页</span>
+          <span class="total">总共 {{ data.length }}条</span>
+          <a-pagination :total="data.length" :current="currentPage" :pageSize="showNum" @change="pageChange"></a-pagination>
+        </a-row>
+      </a-row>
+    </a-row>
+    <a-row class="image-list" :gutter="16">
+      <a-col :lg="6" :sm="12" class="vm-margin" v-for="item in dataShow" :key="item.id">
+        <vm-card :editable="true" :title="item.title" :img="item.img" :desc="item.desc" :detailUrl="item.detailUrl" :editUrl="item.editUrl" @delete-ok=" deleteOk(item) "></vm-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+  import VmCard from '@/components/ctop/vm-card'
+  import ARow from "ant-design-vue/es/grid/Row";
+  import ACol from "ant-design-vue/es/grid/Col";
+  export default {
+    name: 'VmImageList',
+    components: {
+      ACol,
+      ARow,
+      VmCard
+    },
+    props: {
+      title: {
+        type: String,
+        default: '演员列表'
+      },
+      // origin data
+      data: {
+        type: Array,
+        default: function () {
+          return [
+            {
+              id: '19920805',
+              title: 'Title',
+              img: require('@/assets/img/img-1.jpg'),
+              desc: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry,Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s ly dummy tly dummy tly dummy tly dummy tly dummy tly dummy t',
+              to: '#'
+            }
+          ]
+        }
+      }
+    },
+    data: function () {
+      return {
+        keyword: '', // keyword for search
+        dataShow: [], // data for showing
+        showNum: 8, // number of item per page
+        currentPage: 1
+      }
+    },
+    methods: {
+      updateDataShow: function () {
+        let startPage = (this.currentPage - 1) * this.showNum
+        let endPage = startPage + this.showNum
+        this.dataShow = this.data.slice(startPage, endPage)
+      },
+      pageChange: function (page) {
+        this.currentPage = page
+        this.updateDataShow()
+      },
+      search: function () {
+        let that = this
+        let tempData = that.data
+        that.dataShow = []
+        tempData.forEach(function (elem) {
+          for (let i in elem) {
+            if (elem[i].toString().indexOf(that.keyword) > -1) {
+              that.dataShow.push(elem)
+              return
+            }
+          }
+        })
+      },
+      deleteOk: function (data) {
+        this.$emit('delete-ok', data)
+      }
+    },
+    watch: {
+      data: function () {
+        this.dataShow = this.data.slice(0, this.showNum) // update dataShow once data changed
+      }
+    },
+    mounted: function () {
+      this.dataShow = this.data.slice(0, this.showNum)
+    }
+  }
+</script>

+ 3 - 1
src/main.js

@@ -44,8 +44,10 @@ import hasPermission from '@/utils/hasPermission'
 import vueBus from '@/utils/vueBus';
 
 import JeecgComponents from '@/components/jeecg/index'
-
+// import iView from 'iview'
+import '!style-loader!css-loader!less-loader!./theme/index.less'
 Vue.config.productionTip = false
+// Vue.use(iView)
 Vue.use(Storage, config.storageOptions)
 Vue.use(Antd)
 Vue.use(VueAxios, router)

+ 4 - 0
src/theme/chartTheme.js

@@ -0,0 +1,4 @@
+// 图表全局样式
+export default {
+  color: ['#41b883', '#1d8ce0', '#324057', '#2aab84', '#1568a6', '#2f4053']
+}

+ 657 - 0
src/theme/components.less

@@ -0,0 +1,657 @@
+/*customer theme for vm-manager*/
+@vm-grey: #99a9c0;
+@vm-grey-light: #f4f4f4;
+@vm-spacing-base: 15px;
+
+@border-split: 1px solid #e9eaec;
+@border-out: 1px solid #dddee1;
+
+.vm-panel{
+  background-color: white;
+  text-align: left;
+  border-radius: 4px;
+  .panel-heading{
+    text-align: left;
+    width: 100%;
+    border-radius: 4px 4px 0 0;
+    border-bottom: @border-split;
+    padding:@vm-spacing-base;
+    font-weight: bold;
+  }
+  .panel-body{
+    padding: @vm-spacing-base;
+    font-size: 14px;
+  }
+}
+  
+.vm-msg-push{
+  ul{
+    overflow: hidden;
+    li{
+      &:first-child{
+        color: white;
+        font-size: 16px;
+        font-weight: bold;
+        background: #2d8cf0;
+        border-radius: 4px 4px 0 0;
+      }
+      img{
+        vertical-align: top;
+        border-radius: 4px;
+        margin-right: 5px;
+      }
+      text-align: left;
+      .subject{
+        width: 200px;
+        display: inline-block;
+        .title{
+          line-height: 18px;
+          font-size: 16px;
+          font-weight: bold;
+          .time{
+            float: right;
+            font-size: 14px;
+            color: @vm-grey;
+          }
+        }
+        .message{
+            margin-top: 6px;
+            overflow: hidden;
+            text-overflow:ellipsis;
+        }
+      }  
+    }  
+  }
+  .vm-badge{
+    border: 1px solid #dddee1;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    border-radius: 4px;
+    cursor: pointer;
+  }  
+}
+
+.vm-state-overview{
+  background-color: white;
+  border-radius: 4px;
+  min-height: 100px;
+  overflow: hidden;
+  .symbol{
+    color: white;
+    font-size: 45px;
+    background-color: #2d8cf0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .value{
+    color: @vm-grey;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
+.vm-user-preview{
+  overflow: hidden;
+  .panel-heading{
+    display: flex;
+      img{
+      margin-right: @vm-spacing-base;
+    }
+    .title{
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      .name{
+        color: #2d8cf0;
+        font-size: 18px;
+      }
+      .role{
+        color: @vm-grey;
+      }
+    }
+  }
+  ul.content{
+    font-size: 12px;
+    li{
+      display: flex;
+      border-bottom: @border-split;
+      i{
+        color: @vm-grey;
+        font-size: 16px;
+        width: 10px;
+      }
+      padding: 0 @vm-spacing-base;
+      height: 45px;
+      line-height: 45px;
+      span{
+        flex-grow: 1;
+      }
+      span:first-child{
+        width: 20%;
+      }
+      span:nth-child(2){
+        width: 40%;
+      }
+      span:last-child{
+        text-align: right;
+        width: 40%;
+      }
+    }
+    li:last-child{
+      border-bottom: 1px solid transparent;
+    }
+  }
+}
+
+.vm-progress{
+  .panel-heading{
+    height: 80px;
+    color: #2d8cf0;
+    font-size: 16px;
+  }
+  table{
+    tr{
+      td{
+        padding: 0 15px;
+        font-size: 14px;
+      }
+      td:nth-child(2){
+        width: 15%;
+      }
+      td:last-child{
+        width: 40%;
+      }
+    }
+  }
+}
+
+.vm-timeline{
+  font-size: 14px;
+  .panel-heading{
+    color: #2d8cf0;
+    font-size: 16px; 
+  }
+  ul.panel-body{
+    li{
+      .left, .right{
+        flex-grow: 1;
+        width: calc(50% - 1px);
+        padding-bottom: 15px;
+      }
+      .left{
+        text-align: right;
+        padding-right: 30px;
+      }
+      .right{
+        text-align: left;
+        padding-left: 30px;
+      }
+      .content{
+        background-color: @vm-grey-light;
+        border-radius: 4px;
+      }
+      .split{
+        width: 2px;
+        background-color: #dddee1;
+        height: inherit;
+        .dot-left, .dot-right{
+          display: inline-block;
+          position: relative;
+          width: 12px;
+          height: 12px;
+          color: #2d8cf0;
+          background-color: #2d8cf0;
+          border-radius: 50%;
+          margin: 20px 0 0 -5px;
+        }
+        .dot-left:before, .dot-right:before{
+          content: '';
+          border: 6px solid transparent;
+          position: absolute;
+        }
+        .dot-left:before{
+          border-left-color: inherit;
+          left: 8px;
+        }
+        .dot-right:before{
+          border-right-color: inherit;
+          right: 8px;
+        }
+      }
+      
+    }
+  }
+  
+}
+
+.vm-tabs{
+  .heading{
+    height: 55px;
+    border-radius: 4px 4px 0 0;
+    background-color: #2d8cf0;
+    line-height: 55px;
+    font-size: 16px;
+    color: white;
+    .icon{
+      display: inline-block;
+      text-align: center;
+      font-size: 18px;
+      width: 55px;
+      background: rgba(0,0,0,0.1);
+    }
+    .title{
+      margin-left: 10px;
+    }
+  }
+  .body{
+    position: relative;
+    overflow: hidden;
+    padding: @vm-spacing-base;
+    &>ul{
+      position: relative;
+      height: inherit;
+      &>li{
+        display: inline-block;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: white;
+      }
+    }
+  }
+  .footer{
+    min-height: 60px;
+    line-height: 60px;
+    ul{
+      display: flex;
+      border-top: @border-split;
+      justify-content: space-around;
+      li{
+       text-align: center;
+       cursor: pointer;
+      }
+      li.active{
+        color: #2d8cf0;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.vm-weather{
+  .top{
+    color: white;
+    border-radius: 4px 4px 0 0;
+    background-color: #2db7f5;
+    text-align: center;
+    height: 130px;
+    i{
+      font-size: 60px;
+    }
+    .temprature{
+      font-size: 60px;
+    }
+  }
+  .bottom{
+     height: 73px;
+     font-size: 14px;
+     &>div{
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      span{
+        color: @vm-grey;
+      }
+     }
+  }
+}
+
+.vm-table{
+  .control{
+    position: relative;
+    margin-top: -@vm-spacing-base;
+    margin-bottom: @vm-spacing-base;
+    .table-style{
+      display: flex;
+      align-items: center;
+    }
+    &>div{
+      margin-top: @vm-spacing-base;
+    }
+  }
+  .edit{
+    position: relative;
+    margin-bottom: @vm-spacing-base;
+    padding-top: @vm-spacing-base;
+    border-top: 1px dashed #e9eaec;
+  }
+  .footer{
+    margin-top: @vm-spacing-base;
+    .info-bar{
+      .input-number{
+        width: 60px; 
+        margin: 0 10px;
+      }
+    }
+    .page{
+      display: flex;
+      align-items: center;
+      .total{
+        margin-right: 15px;
+      }
+    }
+  }
+}
+
+.vm-state-group{
+  text-align: center;
+  padding: 15px;
+  .item{
+    float: left;
+    border-right: @border-split;
+    &:last-child{
+      border-right: none;
+    }
+    .icon{
+      font-size: 24px;
+    }
+    p{
+      font-size: 14px;
+      color: @vm-grey;
+    }
+  }
+}
+.vm-message-carousel{
+  .item{
+    padding: @vm-spacing-base;
+    .main{
+      padding: @vm-spacing-base;
+      position: relative;
+      &:before, &:after{
+        content: "\"";
+        position: absolute;
+        font-size: 28px;
+        font-weight: bold;
+        color: #2d8cf0;
+      }
+      &:before{
+        top: 0;
+        left: 0;
+      }
+      &:after{
+        bottom: 0;
+        right: 15px;
+      }
+      .title{
+        font-size: 16px;
+        font-weight: bold;
+      }
+      .content{
+        font-size: 16px;
+        margin: @vm-spacing-base 0;
+      } 
+    }
+    .from{
+      margin: 0 @vm-spacing-base;
+      img{
+        border-radius: 50%;
+        vertical-align: middle;
+        height: 40px;
+        margin-right: @vm-spacing-base;
+      }
+      .name{
+        font-size: 16px;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.vm-card-vertical{
+  .card-img{
+    position: relative;
+    text-align: center;
+    img{
+      //display: block;
+      //width: 100%
+      display:inline-block;
+    }
+    .control{
+      position: absolute;
+      bottom: -20px;
+      right: 15px;
+      display: flex;
+      span{
+        display: flex;
+        justify-content: center;
+        margin-left: 10px;
+        align-items: center;
+        color: white;
+        font-size: 18px;
+        background-color: #2d8cf0;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        cursor: pointer;
+      }
+      span.edit{
+        background-color: #2db7f5;
+        a{
+          color: white;
+        }
+      }
+      span.delete{
+        background-color: #2d8cf0;
+      }
+    }
+  }
+  .card-desc{
+    p{
+      font-size: 14px;
+      margin: 10px 0;
+      text-align: justify;
+      height: 84px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.vm-card-horizantal{
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  padding: 0;
+  .card-img{
+    display: flex;
+    align-items: center;
+    //width: 50%;
+    img{
+      //display: block;
+      margin: 0;
+      //width: 100%;
+    }
+  }
+  .card-desc{
+    width: 50%;
+    p{
+      font-size: 14px;
+      margin: 10px 0;
+      text-align: justify;
+    }
+  }
+}
+
+.vm-circle{
+  padding: @vm-spacing-base;
+  &>div{
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .title{
+    margin-bottom: 5px;
+  }
+  p{
+    font-size: 14px;
+  }
+}
+
+.vm-login{
+  width: 900px;
+  height: 400px;
+  &>div{
+    padding: 30px;
+  }
+  .login-form{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    .login-header{
+      text-align: center;
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 20px;
+      span{
+        color: #2d8cf0;
+      }
+    }
+    .login-form{
+      input{
+        margin-bottom: 20px;
+        width: 100%;
+        height: 45px;
+      }
+      button{
+        height: 45px;
+        width: 100%;
+      }
+    }
+    .login-footer{
+      margin-top: 10px;
+      span.forget{
+        float: right;
+      }
+    }
+  }
+  .login-ad{
+    height: 100%;
+    font-weight: bold;
+    font-size: 14px;
+    border-radius: 0 4px 4px 0;
+    background: url("../assets/img/login-bg.jpg");
+    .photo-author{
+      position: absolute;
+      right: 6px;
+      bottom: 45px;
+    }
+  } 
+}
+
+.vm-lock-screen{
+    width: 600px;
+    height: 450px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .company{
+      font-size: 16px;
+      font-weight: bold;
+      img{
+        vertical-align: middle;
+      }
+      span{
+        color: #2d8cf0;
+      }
+      margin-bottom: 50px;
+    }
+    .user{
+      margin-bottom: 50px;
+      p.name{
+        text-align: center;
+        font-size: 14px;
+        line-height: 20px;
+      }
+    }
+    input{
+      margin-bottom: 10px;
+    }
+    button{
+      width: 300px;
+    }
+}
+
+.vm-image-list{
+  .image-list-heading{
+    .page{
+      span{
+        margin-right: 10px;
+      }
+      span.margin-end{
+        margin-right: 20px;
+      }
+      .input-number{
+        width: 40px;
+        margin-right: 10px;
+      }
+    }
+    .panel-body{
+      margin-top: -@vm-spacing-base;
+      &>div{
+        margin-top: @vm-spacing-base;
+      }
+    }
+  }
+  .total{
+    margin-right: 15px;
+  }
+}
+
+.vm-loading{
+  .rect{
+    width: 8px;
+    height: 36px;
+    background-color: #2d8cf0;
+    float: left;
+    margin: 3px;
+    animation: animate 1s infinite;
+    &:nth-child(2){
+      animation-delay: 0.1s
+    }
+    &:nth-child(3){
+      animation-delay: 0.2s
+    }
+    &:nth-child(4){
+      animation-delay: 0.3s
+    }
+    &:nth-child(5){
+      animation-delay: 0.4s
+    }
+    &:nth-child(6){
+      animation-delay: 0.5s
+    }
+    &:nth-child(7){
+      animation-delay: 0.6s
+    }
+    &:nth-child(8){
+      animation-delay: 0.7s
+    }
+    &:nth-child(9){
+      animation-delay: 0.8s
+    }
+    &:nth-child(10){
+      animation-delay: 0.9s
+    }
+  }
+}
+@keyframes animate{
+  50%{
+    transform: scaleY(0)
+  }
+}

+ 58 - 0
src/theme/demo.less

@@ -0,0 +1,58 @@
+/*style for demo*/
+//variable
+@sidebar-width: 210px;
+@nav-height: 60px;
+
+body{
+  background-color: #f7f7f7;
+}
+img{
+  border-radius: 4px;
+}
+.vm-margin{
+  margin-top: 15px;
+}
+
+
+.demo-news{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.panel{
+  .demo-circle{
+    height: 250px;
+  }
+}
+
+.login, .lock-screen, .loading{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+
+.loading{
+  background: #fff;
+}
+
+.vm-author{
+   line-height: 45px;
+   font-size: 14px;
+   a{
+     color: #2d8cf0;
+   }
+ }
+
+.dashboard, .widget, .charts, .panels{
+  &>.ivu-row{
+    &>.ivu-col{
+      margin-top: 15px;
+    }
+  }
+}

+ 65 - 0
src/theme/index.less

@@ -0,0 +1,65 @@
+//@import '~iview/src/styles/index.less';
+@import './demo.less';
+@import './components.less';
+
+// Color
+@primary-color          : #41b883;
+@info-color             : #1d8ce0;
+@success-color          : #41b883;
+@warning-color          : #ffa000;
+@error-color            : #F60000;
+@link-color             : #35495e;
+@subsidiary-color       : #9ea3b1;
+
+// Border color
+@border-color-base      : #dddee1;  // outside
+@border-color-split     : #eeeff1;  // inside
+@table-td-hover-bg      : #fafafa;
+
+// Background color
+@background-color-base  : #f1f2f7;  // base
+@menu-dark-active-bg    : #171e2e;
+@menu-dark-title        : #1c2438;
+
+//components
+.ivu-select-dropdown{
+  margin: 10px 0;
+  padding: 0;
+  .ivu-dropdown-item{
+    padding: 10px;
+  }
+  .ivu-dropdown-item-divided{
+    margin: 0;
+    &:before{
+      height: 0;
+    }
+  }
+}
+
+.ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active:hover {
+  color: #2d8cf0;
+  background: transparent !important;
+}
+
+table{
+  width: 100%;
+  border-spacing: 0;
+  tr{
+    td{
+      height: 44px;
+      margin: 0;
+      border-bottom: 1px solid #e9eaec;
+      margin: 0;
+    }
+  }
+  tr:last-child{
+    td{
+      border-bottom: none;
+    }
+  }
+}
+
+
+
+
+

+ 7 - 4
src/views/modules/actor/ActorList.vue

@@ -48,9 +48,7 @@
         :columns="columns"
         :dataSource="dataSource"
         :pagination="ipagination"
-        :loading="loading"
-        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-        @change="handleTableChange">
+        :loading="loading">
 
         <!-- 字符串超长截取省略号显示-->
         <span slot="esContent" slot-scope="text">
@@ -85,7 +83,7 @@
   import JEllipsis from "@/components/jeecg/JEllipsis";
 
   export default {
-    name: "SysMessageList",
+    name: "ActorList",
     mixins: [JeecgListMixin],
     components: {
       JEllipsis,
@@ -100,6 +98,11 @@
         // 表头
         columns: [
           {
+            title: 'ID',
+            align: "center",
+            dataIndex: 'id'
+          },
+          {
             title: '姓名',
             align: "center",
             dataIndex: 'name'

+ 3 - 1
src/views/modules/actor/modules/ActorModal.vue

@@ -104,7 +104,7 @@
         region: 'oss-cn-beijing',
         bucket: 'ctop-media',
         acceptVideo: 'video/mpeg,video/mp4',
-        acceptImage: 'image/jpeg,image,jpg/png',
+        acceptImage: 'image/jpeg,image/jpg,image/png',
         accessKeyId: 'LTAIbNbqWzSOklQV',
         accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
         dateFormat: "YYYY-MM-DD",
@@ -172,6 +172,8 @@
             } else {
               values.birthday = values.birthday.format(this.dateFormat);
             }
+            values.imageUrl = this.imageUrl;
+            values.videoUrl = this.videoUrl;
             let formData = Object.assign(this.model, values);
             //时间格式化
 

+ 124 - 0
src/views/modules/image/ImageList.vue

@@ -0,0 +1,124 @@
+<template>
+  <vm-image-list :data="dataImageList" @delete-ok="deletefn" class="vm-margin"></vm-image-list>
+</template>
+
+<script>
+  import VmImageList from '@/components/ctop/vm-image-list'
+  export default {
+    name: 'ImageList',
+    components: {
+      VmImageList
+    },
+    methods: {
+      deletefn: function (data) {
+        for (let i = 0; i < this.dataImageList.length; i++) {
+          if (this.dataImageList[i].id === data.id) {
+            this.dataImageList.splice(i, 1)
+          }
+        }
+      }
+    },
+    data: function () {
+      return {
+        dataImageList: [
+          {
+            id: '1',
+            title: '佟丽娅',
+            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569329515&di=192e14566c758fcd55c1cc71fa19421a&imgtype=jpg&er=1&src=http%3A%2F%2Fstatic.ws.126.net%2Fent%2F2015%2F8%2F5%2F20150805175229d97cb.jpg',
+            desc: '代表作《北京爱情故事》',
+            detailUrl: 'http://www.baidu.com',
+            editUrl: 'http://www.baidu.com'
+          },
+          {
+            id: '2',
+            title: '佟丽娅',
+            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569379371&di=cc78b98e59098b91b71b86aef92dcf43&imgtype=jpg&er=1&src=http%3A%2F%2Fi3.sinaimg.cn%2Fent%2Fj%2F2009-08-31%2FU2223P28T3D2676725F358DT20090831022144.jpg',
+            desc: '代表作《北京爱情故事》',
+            detailUrl: 'http://www.baidu.com',
+            editUrl: 'http://www.baidu.com'
+          },
+          {
+            id: '3',
+            title: '佟丽娅',
+            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569329515&di=192e14566c758fcd55c1cc71fa19421a&imgtype=jpg&er=1&src=http%3A%2F%2Fstatic.ws.126.net%2Fent%2F2015%2F8%2F5%2F20150805175229d97cb.jpg',
+            desc: '代表作《北京爱情故事》',
+            detailUrl: 'http://www.baidu.com',
+            editUrl: 'http://www.baidu.com'
+          },
+          {
+            id: '4',
+            title: '佟丽娅',
+            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569329515&di=192e14566c758fcd55c1cc71fa19421a&imgtype=jpg&er=1&src=http%3A%2F%2Fstatic.ws.126.net%2Fent%2F2015%2F8%2F5%2F20150805175229d97cb.jpg',
+            desc: '代表作《北京爱情故事》',
+            detailUrl: 'http://www.baidu.com',
+            editUrl: 'http://www.baidu.com'
+          },
+          {
+            id: '5',
+            title: '佟丽娅',
+            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569329515&di=192e14566c758fcd55c1cc71fa19421a&imgtype=jpg&er=1&src=http%3A%2F%2Fstatic.ws.126.net%2Fent%2F2015%2F8%2F5%2F20150805175229d97cb.jpg',
+            desc: '代表作《北京爱情故事》',
+            detailUrl: 'http://www.baidu.com',
+            editUrl: 'http://www.baidu.com'
+          },
+          {
+            id: '6',
+            title: '佟丽娅',
+            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569329515&di=192e14566c758fcd55c1cc71fa19421a&imgtype=jpg&er=1&src=http%3A%2F%2Fstatic.ws.126.net%2Fent%2F2015%2F8%2F5%2F20150805175229d97cb.jpg',
+            desc: '代表作《北京爱情故事》',
+            detailUrl: 'http://www.baidu.com',
+            editUrl: 'http://www.baidu.com'
+          },
+          {
+            id: '7',
+            title: '佟丽娅',
+            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569329515&di=192e14566c758fcd55c1cc71fa19421a&imgtype=jpg&er=1&src=http%3A%2F%2Fstatic.ws.126.net%2Fent%2F2015%2F8%2F5%2F20150805175229d97cb.jpg',
+            desc: '代表作《北京爱情故事》',
+            detailUrl: 'http://www.baidu.com',
+            editUrl: 'http://www.baidu.com'
+          },
+          {
+            id: '8',
+            title: '佟丽娅',
+            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569329515&di=192e14566c758fcd55c1cc71fa19421a&imgtype=jpg&er=1&src=http%3A%2F%2Fstatic.ws.126.net%2Fent%2F2015%2F8%2F5%2F20150805175229d97cb.jpg',
+            desc: '代表作《北京爱情故事》',
+            detailUrl: 'http://www.baidu.com',
+            editUrl: 'http://www.baidu.com'
+          },
+          {
+            id: '9',
+            title: '佟丽娅',
+            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569329515&di=192e14566c758fcd55c1cc71fa19421a&imgtype=jpg&er=1&src=http%3A%2F%2Fstatic.ws.126.net%2Fent%2F2015%2F8%2F5%2F20150805175229d97cb.jpg',
+            desc: '代表作《北京爱情故事》',
+            detailUrl: 'http://www.baidu.com',
+            editUrl: 'http://www.baidu.com'
+          },
+          {
+            id: '10',
+            title: '佟丽娅',
+            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569329515&di=192e14566c758fcd55c1cc71fa19421a&imgtype=jpg&er=1&src=http%3A%2F%2Fstatic.ws.126.net%2Fent%2F2015%2F8%2F5%2F20150805175229d97cb.jpg',
+            desc: '代表作《北京爱情故事》',
+            detailUrl: 'http://www.baidu.com',
+            editUrl: 'http://www.baidu.com'
+          },
+          {
+            id: '11',
+            title: '佟丽娅',
+            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569329515&di=192e14566c758fcd55c1cc71fa19421a&imgtype=jpg&er=1&src=http%3A%2F%2Fstatic.ws.126.net%2Fent%2F2015%2F8%2F5%2F20150805175229d97cb.jpg',
+            desc: '代表作《北京爱情故事》',
+            detailUrl: 'http://www.baidu.com',
+            editUrl: 'http://www.baidu.com'
+          },
+          {
+            id: '12',
+            title: '佟丽娅',
+            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569329515&di=192e14566c758fcd55c1cc71fa19421a&imgtype=jpg&er=1&src=http%3A%2F%2Fstatic.ws.126.net%2Fent%2F2015%2F8%2F5%2F20150805175229d97cb.jpg',
+            desc: '代表作《北京爱情故事》',
+            detailUrl: 'http://www.baidu.com',
+            editUrl: 'http://www.baidu.com'
+          }
+        ]
+      }
+    }
+  }
+</script>

+ 139 - 0
src/views/modules/yard/YardList.vue

@@ -0,0 +1,139 @@
+<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>
+        </span>
+
+      </a-table>
+    </div>
+    <!-- table区域-end -->
+
+    <!-- 表单区域 -->
+    <yard-modal ref="modalForm" @ok="modalFormOk"></yard-modal>
+  </a-card>
+</template>
+
+<script>
+  import YardModal from './modules/YardModal'
+  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
+  import JEllipsis from "@/components/jeecg/JEllipsis";
+
+  export default {
+    name: "YardList",
+    mixins: [JeecgListMixin],
+    components: {
+      JEllipsis,
+      YardModal
+    },
+    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",
+        },
+      }
+    },
+
+    methods: {}
+  }
+</script>
+<style  scoped>
+  @import '~@assets/less/common.less'
+</style>

+ 205 - 0
src/views/modules/yard/modules/YardModal.vue

@@ -0,0 +1,205 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="800"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭">
+
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="场地名称">
+          <a-input placeholder="请输入场地名称" v-decorator="['buildingName']"/>
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="地址">
+          <a-input placeholder="请输入地址" v-decorator="['address']"/>
+        </a-form-item>
+        <a-form-item
+          label="照片"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+        >
+          <upload-to-ali
+            v-model="imageUrl"
+            :customDomain="customDomain"
+            multiple
+            preview
+            :region="region"
+            :bucket="bucket"
+            :accept="acceptImage"
+            :max="10"
+            :size="1024000"
+            :accessKeyId="accessKeyId"
+            :accessKeySecret="accessKeySecret"
+          ></upload-to-ali>
+        </a-form-item>
+        <a-form-item
+          label="视频"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+        >
+          <upload-to-ali
+            v-model="videoUrl"
+            :customDomain="customDomain"
+            multiple
+            preview
+            :region="region"
+            :bucket="bucket"
+            :accept="acceptVideo"
+            :max="10"
+            :size="1024000"
+            :accessKeyId="accessKeyId"
+            :accessKeySecret="accessKeySecret"
+          ></upload-to-ali>
+        </a-form-item>
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="联系人姓名">
+          <a-input placeholder="请输入联系人姓名" v-decorator="['contactName']"/>
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="联系人电话">
+          <a-input placeholder="请输入联系人电话" v-decorator="['contactMobile']"/>
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="备注">
+          <a-input placeholder="请输入备注" v-decorator="['remark']"/>
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+  import {httpAction} from '@/api/manage'
+  import pick from 'lodash.pick'
+  import JTreeSelect from '@/components/jeecg/JTreeSelect'
+  import moment from 'moment'
+  import UploadToAli from '@femessage/upload-to-ali'
+  export default {
+    name: "YardModal",
+    components: {
+      UploadToAli,
+      JTreeSelect
+    },
+    data() {
+      return {
+        title: "操作",
+        visible: false,
+        model: {},
+        videoUrl: [],
+        imageUrl: [],
+        customDomain: '',
+        region: 'oss-cn-beijing',
+        bucket: 'ctop-media',
+        acceptVideo: 'video/mpeg,video/mp4',
+        acceptImage: 'image/jpeg,image/jpg,image/png',
+        accessKeyId: 'LTAIbNbqWzSOklQV',
+        accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
+        dateFormat: "YYYY-MM-DD",
+        labelCol: {
+          xs: {span: 24},
+          sm: {span: 5},
+        },
+        wrapperCol: {
+          xs: {span: 24},
+          sm: {span: 16},
+        },
+
+        confirmLoading: false,
+        form: this.$form.createForm(this),
+
+        url: {
+          add: "/ctop/yard/add",
+          edit: "/ctop/yard/edit",
+        },
+      }
+    },
+    created() {
+    },
+    methods: {
+      add() {
+        this.edit({});
+      },
+      edit(record) {
+
+        let that = this;
+        that.form.resetFields();
+        that.model = Object.assign({}, record);
+        that.visible = true;
+        that.$nextTick(() => {
+          that.form.setFieldsValue(pick(this.model, 'buildingName', 'contactName', 'contactMobile','address','remark','imageUrl','videoUrl'))
+          //时间格式化
+        });
+
+      },
+      close() {
+        this.$emit('close');
+        this.visible = false;
+      },
+      moment,
+      handleOk() {
+        const that = this;
+        // 触发表单验证
+        this.form.validateFields((err, values) => {
+          if (!err) {
+            that.confirmLoading = true;
+            let httpurl = '';
+            let method = '';
+            if (!this.model.id) {
+              httpurl += this.url.add;
+              method = 'post';
+            } else {
+              httpurl += this.url.edit;
+              method = 'put';
+            }
+
+            values.imageUrl = this.imageUrl;
+            values.videoUrl = this.videoUrl;
+            let formData = Object.assign(this.model, values);
+            //时间格式化
+
+            console.log(formData)
+            httpAction(httpurl, formData, method).then((res) => {
+              if (res.success) {
+                that.$message.success(res.message);
+                that.$emit('ok');
+              } else {
+                that.$message.warning(res.message);
+              }
+            }).finally(() => {
+              that.confirmLoading = false;
+              that.close();
+            })
+
+
+          }
+        })
+      },
+      handleCancel() {
+        this.close()
+      },
+
+
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+
+</style>