瀏覽代碼

Merge remote-tracking branch 'origin/test' into test

yumeng 5 年之前
父節點
當前提交
6eb01c322a

+ 82 - 1
src/api/actor.js

@@ -7,4 +7,85 @@ export function actorList(parameter) {
       method: 'get',
       params: parameter
     })
-  }
+}
+export function actorPhotoList(parameter) {
+    return axios({
+      url: "/ctop/actor/photo/list",
+      method: 'get',
+      params: parameter
+    })
+}
+
+export function actorPhotoDelete(parameter) {
+    return axios({
+      url: "/ctop/actor/photo/delete",
+      method: 'delete',
+      params: parameter
+    })
+}
+
+export function actorPhotoAdd(parameter) {
+    return axios({
+      url: "/ctop/actor/photo/add",
+      method: 'post',
+      params: parameter
+    })
+}
+
+export function actorVideoDelete(parameter) {
+    return axios({
+      url: "/ctop/actor/video/delete",
+      method: 'delete',
+      params: parameter
+    })
+}
+
+export function actorVideoAdd(parameter) {
+    return axios({
+      url: "/ctop/actor/video/add",
+      method: 'post',
+      params: parameter
+    })
+}
+
+export function actorDetail(parameter) {
+    return axios({
+        url: "/ctop/actor/detail",
+        method: 'get',
+        params: parameter
+    })
+}
+
+
+export function actorCommentList(parameter) {
+    return axios({
+        url: "/ctop/actor/comment/list",
+        method: 'get',
+        params: parameter
+    })
+}
+
+export function actorCommentAdd(parameter) {
+    return axios({
+        url: "/ctop/actor/comment/add",
+        method: 'post',
+        params: parameter
+    })
+}
+
+export function actorCommentDetele(parameter) {
+    return axios({
+        url: "/ctop/actor/comment/delete",
+        method: 'delete',
+        params: parameter
+    })
+}
+
+
+export function actorVideoList(parameter) {
+    return axios({
+        url: "/ctop/actor/video/list",
+        method: 'get',
+        params: parameter
+    })
+}

+ 50 - 0
src/api/yard.js

@@ -0,0 +1,50 @@
+
+import {axios} from '@/utils/request'
+
+export function yardPhotoList(parameter) {
+    return axios({
+      url: "/ctop/yard/photo/list",
+      method: 'get',
+      params: parameter
+    })
+}
+
+export function yardVideoList(parameter) {
+    return axios({
+      url: "/ctop/yard/video/list",
+      method: 'get',
+      params: parameter
+    })
+}
+
+export function yardPhotoDelete(parameter) {
+    return axios({
+      url: "/ctop/yard/photo/delete",
+      method: 'delete',
+      params: parameter
+    })
+}
+
+export function yardVideoDelete(parameter) {
+    return axios({
+      url: "/ctop/yard/video/delete",
+      method: 'delete',
+      params: parameter
+    })
+}
+
+export function yardPhotoAdd(parameter) {
+    return axios({
+      url: "/ctop/yard/photo/add",
+      method: 'post',
+      params: parameter
+    })
+}
+
+export function yardVideoAdd(parameter) {
+    return axios({
+      url: "/ctop/yard/video/add",
+      method: 'post',
+      params: parameter
+    })
+}

二進制
src/assets/img/noImg.png


+ 236 - 0
src/components/ctop/ActorModal.vue

@@ -0,0 +1,236 @@
+<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="['name', validatorRules.name ]"/>
+        </a-form-item>
+        <a-form-item
+          label="封面"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+        >
+          <upload-to-ali
+            v-model="coverUrl"
+            :customDomain="customDomain"
+            preview
+            :region="region"
+            :bucket="bucket"
+            :accept="acceptImage"
+            :max="1"
+            :size="1024000"
+            :accessKeyId="accessKeyId"
+            :accessKeySecret="accessKeySecret"
+          ></upload-to-ali>
+        </a-form-item>
+        <a-form-item
+          label="照片"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          v-if="!model.name"
+        >
+          <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"
+          v-if="!model.name"
+        >
+          <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 label="生日" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-date-picker
+            style="width: 100%"
+            placeholder="请选择生日"
+            v-decorator="['birthday', {initialValue:!model.birthday?null:moment(model.birthday,dateFormat)}]"/>
+        </a-form-item>
+
+        <a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-select v-decorator="[ 'sex', {}]" placeholder="请选择性别">
+            <a-select-option :value="1">男</a-select-option>
+            <a-select-option :value="2">女</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="特长">
+          <a-input placeholder="请输入特长" v-decorator="['speciality']"/>
+        </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: "ActorModal",
+    components: {
+      UploadToAli,
+      JTreeSelect
+    },
+    data() {
+      return {
+        title: "操作",
+        visible: false,
+        model: {},
+        videoUrl: [],
+        imageUrl: [],
+        coverUrl:"",
+        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),
+        validatorRules: {
+          name: {rules: [{required: true, message: '请输入演员姓名!'}]},
+          // sex:{initialValue:((!this.model.sex)?"": (this.model.sex+""))},
+        },
+        url: {
+          add: "/ctop/actor/add",
+          edit: "/ctop/actor/edit",
+        },
+      }
+    },
+    created() {
+    },
+    methods: {
+      add() {
+        this.edit({});
+      },
+      edit(record) {
+        console.log(record)
+        let that = this;
+        that.form.resetFields();
+        that.model = Object.assign({}, record);
+        that.visible = true;
+        that.coverUrl = record.coverUrl
+        that.imageUrl = record.imageUrl
+        that.videoUrl = record.videoUrl
+        that.$nextTick(() => {
+          that.form.setFieldsValue(pick(this.model, 'name', 'sex', 'speciality'))
+          //时间格式化
+        });
+
+      },
+      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';
+            }
+            if (!values.birthday) {
+              values.birthday = '';
+            } else {
+              values.birthday = values.birthday.format(this.dateFormat);
+            }
+            values.imageUrl = this.imageUrl;
+            values.coverUrl = this.coverUrl
+            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');
+                that.$emit("updateList")
+                this.imageUrl = []
+                this.videoUrl = []
+                this.coverUrl = ""
+              } else {
+                that.$message.warning(res.message);
+              }
+            }).finally(() => {
+              that.confirmLoading = false;
+              that.close();
+            })
+
+
+          }
+        })
+      },
+      handleCancel() {
+        this.close()
+      },
+
+
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+
+</style>

二進制
src/components/ctop/noImg.png


+ 515 - 39
src/components/ctop/vm-card.vue

@@ -1,67 +1,543 @@
+<style>
+.ping .ant-modal-content .ant-modal-footer {
+  display: none !important;
+}
+.ping .ant-list-item-content {
+  justify-content: space-between;
+  cursor: pointer;
+}
+.ping-list .detele {
+  display: none;
+}
+/* .ping-list:hover span {
+  display: block;
+} */
+.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>
   <div :class="[type === 'horizantal' ? 'vm-card-horizantal' : 'vm-card-vertical' , 'vm-panel']">
-    <div class="card-img" style="height: 250px" :style="{backgroundImage: 'url(' +img+')', backgroundSize:'contain', backgroundRepeat: 'no-repeat',backgroundPosition:'center center'}">
+    <div
+      class="card-img"
+      style="height:250px"
+      :style="{backgroundImage: img?'url(' +img+')':'url('+noImgUrl+')', backgroundSize:'contain', backgroundRepeat: 'no-repeat',backgroundPosition:'center center'}"
+    >
       <!-- <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>     
+            <a-icon type="edit" @click="handleDetail(record)"></a-icon>
+          </a>
         </span>
         <span class="delete">
-            <a-icon type="message"></a-icon>
+          <a-icon type="message" @click="getComment"></a-icon>
         </span>
       </div>
     </div>
     <div class="card-desc panel-body">
       <h2>{{ title }}</h2>
       <p>{{ desc }}</p>
-      <a :href="detailUrl">
-        详情 >
-      </a>
+      <a :href="detailUrl" @click="getDetail">详情 ></a>
     </div>
+    <a-modal title="评论" v-model="visible" class="ping">
+      <div>
+        <div style="height:300px;overflow:auto">
+          <a-list
+            v-if="comments.length"
+            :dataSource="comments"
+            :header="`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`"
+            itemLayout="horizontal"
+          >
+            <a-list-item slot="renderItem" slot-scope="item, index" class="ping-list">
+              <a-comment
+                :author="item.createBy"
+                :avatar="item.avatar"
+                :content="item.comment"
+                :datetime="item.createTime"
+              ></a-comment>
+              <span class="detele" style="margin:20px;color:red;" @click="detele(item,index)">删除</span>
+            </a-list-item>
+          </a-list>
+          <div v-else style="height:300px;text-align:center;line-height:300px">暂无评论</div>
+        </div>
+        <a-comment>
+          <!-- <a-avatar
+            slot="avatar"
+            :src="loginInfo.value.avatar"
+            alt="Han Solo"
+          />-->
+          <img :src="loginInfo.value.avatar" alt slot="avatar" />
+          <div slot="content">
+            <a-form-item>
+              <a-textarea :rows="4" @change="handleChange" :value="value"></a-textarea>
+            </a-form-item>
+            <a-form-item>
+              <a-button
+                htmlType="submit"
+                :loading="submitting"
+                @click="handleSubmit"
+                type="primary"
+              >添加</a-button>
+            </a-form-item>
+          </div>
+        </a-comment>
+      </div>
+    </a-modal>
+
+    <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">
+          <div style="display:flex;flex-direction:row;height:200px;">
+            <div
+              style="height:200px;width:30%;border:1px solid #f2f2f2;"
+              :style="{backgroundImage: img?'url(' +img+')':'url('+noImgUrl+')', backgroundSize:'contain', backgroundRepeat: 'no-repeat',backgroundPosition:'center center'}"
+            ></div>
+            <div style="flex:1;margin:15px">
+              <a-form :form="form">
+                <a-form-item label="姓名" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
+                  <span>{{form.name}}</span>
+                </a-form-item>
+                <a-form-item label="性别" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
+                  <span>{{form.sex==1?"男":"女"}}</span>
+                </a-form-item>
+                <a-form-item label="出生年月" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
+                  <span>{{form.birthday}}</span>
+                </a-form-item>
+              </a-form>
+            </div>
+          </div>
+          <div style="margin-top:20px">
+            <a-collapse accordion>
+              <a-collapse-panel header="个人信息" key="1">
+                <p>{{form.speciality}}</p>
+              </a-collapse-panel>
+            </a-collapse>
+          </div>
+        </a-tab-pane>
+        <a-tab-pane tab="演员图集" key="2" 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="3">
+          <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>
+    <actor-modal ref="modalForm" @ok="modalFormOk" @updateList="updateList" @close="closeVideo"></actor-modal>
   </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'
+import moment from 'moment'
+import {
+  actorDetail,
+  actorCommentList,
+  actorCommentAdd,
+  actorCommentDetele,
+  actorPhotoList,
+  actorVideoList,
+  actorPhotoDelete,
+  actorVideoDelete,
+  actorPhotoAdd,
+  actorVideoAdd
+} from '@/api/actor'
+import actorModal from './ActorModal'
+import UploadToAli from '@femessage/upload-to-ali'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import { closeAllVideoFun } from '@/utils/videoControl'
+export default {
+  name: 'VmCard',
+  mixins: [JeecgListMixin],
+  components: {
+    actorModal,
+    UploadToAli
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'vertical'
+    },
+    editable: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: 'Title'
+    },
+    img: {
+      type: String,
+      default: require('@/assets/img/noImg.png')
+    },
+    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: '#'
+    },
+    id: {
+      default() {
+        return 0
+      }
+    },
+    record: {
+      default() {
+        return {}
+      }
+    }
+  },
+  data: function() {
+    return {
+      addPhoto: false,
+      addVideo: false,
+      indexDetail: '1',
+      to: null,
+      comments: [],
+      submitting: false,
+      value: '',
+      moment,
+      visible: false,
+      detail: false,
+      customDomain: '',
+      region: 'oss-cn-beijing',
+      bucket: 'ctop-media',
+      acceptVideo: 'video/mpeg,video/mp4',
+      acceptImage: 'image/jpeg,image/jpg,image/png',
+      accessKeyId: 'LTAIbNbqWzSOklQV',
+      accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
+      form: {
+        name: '',
+        birthday: '',
+        sex: null,
+        speciality: ''
       },
-      detailUrl: {
-        type: String,
-        default: '#'
+      noImgUrl: require('@/assets/img/noImg.png'),
+      loginInfo: JSON.parse(localStorage.getItem('pro__Login_Userinfo')),
+      photoList: [],
+      imageUrl: '',
+      videoUrl: '',
+      total: 1,
+      videoTotal: 1,
+      pageSize: 4,
+      url: {
+        list: '/ctop/actor/list'
       },
-      editUrl: {
-        type: String,
-        default: '#'
+      columns: [
+        {
+          title: 'ID',
+          align: 'center',
+          dataIndex: 'id'
+        },
+        {
+          title: '姓名',
+          align: 'center',
+          dataIndex: 'name'
+        },
+        {
+          title: '生日',
+          align: 'center',
+          dataIndex: 'birthday'
+        },
+        {
+          title: '性别',
+          align: 'center',
+          dataIndex: 'sex_dictText'
+        },
+        {
+          title: '特长',
+          align: 'center',
+          dataIndex: 'speciality'
+        },
+        {
+          title: '创建时间',
+          align: 'center',
+          dataIndex: 'createTime'
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      currentPage: 1,
+      videoList: []
+    }
+  },
+  methods: {
+    updateList() {
+      this.$emit('updateList')
+    },
+    pageChange: function(page) {
+      console.log(page)
+      this.currentPage = page
+      if (this.indexDetail == '2') {
+        this.getPhoto()
+      } else if (this.indexDetail == '3') {
+        this.getVideo()
+      }
+    },
+    handleSubmit() {
+      if (!this.value) {
+        return
       }
+
+      this.submitting = true
+
+      actorCommentAdd({ actorId: this.id, comment: this.value }).then(res => {
+        this.submitting = false
+        if (res.code == 200) {
+          this.getComment()
+          this.value = ''
+        }
+      })
+      //   setTimeout(() => {}, 1000)
+    },
+    handleChange(e) {
+      this.value = e.target.value
+    },
+    getDetail() {
+      this.indexDetail = '1'
+      this.detail = true
+      actorDetail({ actorId: this.id }).then(res => {
+        console.log(res)
+        if (res.code == 0) {
+          this.form.name = res.result.name
+          this.form.birthday = res.result.birthday
+          this.form.sex = res.result.sex
+          this.form.speciality = res.result.speciality
+        }
+      })
     },
-    data: function () {
-        return {
-            to:null
+    getComment() {
+      this.visible = true
+      this.comments = []
+      actorCommentList({ actorId: this.id }).then(res => {
+        if (res.code == 0) {
+          console.log(res)
+          this.comments = res.result.records.reverse()
         }
+      })
     },
-    methods: {
+    detele(item, index) {
+      console.log(item, index)
 
+      actorCommentDetele({ id: item.id }).then(res => {
+        if (res.code == 200) {
+          this.comments.splice(index, 1)
+        }
+      })
+    },
+    closeVideo() {
+      closeAllVideoFun()
+    },
+    callback(key) {
+      console.log(key)
+      if (key == '2') {
+        this.closeVideo()
+        this.currentPage = 1
+        this.getPhoto()
+      } else if (key == '3') {
+        this.currentPage = 1
+        this.getVideo()
+      } else if (key == '1') {
+        this.closeVideo()
+      }
+    },
+    getPhoto() {
+      actorPhotoList({ pageNo: this.currentPage, pageSize: 4, actorId: this.id }).then(res => {
+        if (res.code == 0) {
+          console.log(res)
+          this.photoList = res.result.records
+          this.total = res.result.total
+        }
+      })
+    },
+    getVideo() {
+      actorVideoList({ pageNo: this.currentPage, pageSize: 4, actorId: this.id }).then(res => {
+        if (res.code == 0) {
+          console.log(res)
+          this.videoList = res.result.records
+          this.videoTotal = res.result.total
+        }
+      })
+    },
+    deteleImg(id) {
+      actorPhotoDelete({ id: id }).then(res => {
+        if (res.code == 200) {
+          console.log(res)
+          this.getPhoto()
+        }
+      })
+    },
+    deteleVideo(id) {
+      actorPhotoDelete({ id: id }).then(res => {
+        if (res.code == 200) {
+          console.log(res)
+          this.getPhoto()
+        }
+      })
+    },
+    handleOk(type) {
+      const that = this
+      if (type == 'photo') {
+        actorPhotoAdd({ actorId: 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 {
+        actorVideoAdd({ actorId: 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
+      }
     }
   }
+}
 </script>

+ 101 - 23
src/components/ctop/vm-image-list.vue

@@ -38,11 +38,14 @@
       <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>
+          <a-button @click="handleAdd" type="primary" icon="plus" style="margin-right:10px">新增</a-button>
+          <a-input placeholder="请输入搜索内容" v-model="keyword" style="width: 300px">
+            <a-icon slot="addonAfter" type="search" style="cursor: pointer;" @click="search" />
+          </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>
+          <!-- <span>第</span>
           <a-input
             :max="40"
             :min="1"
@@ -58,23 +61,34 @@
             :current="currentPage"
             :pageSize="showNum"
             @change="pageChange"
-          ></a-pagination>
+          ></a-pagination>-->
+
+          <a-pagination
+            showQuickJumper
+            :total="total"
+            @change="pageChange"
+            :pageSize.sync="showNum"
+          />
         </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">
+      <a-col :lg="6" :sm="12" class="vm-margin" v-for="(item,index) of dataShow" :key="index">
         <vm-card
           :editable="true"
-          :title="item.title"
-          :img="item.img"
-          :desc="item.desc"
-          :detailUrl="item.detailUrl"
+          :title="item.name"
+          :img="item.coverUrl"
+          :desc="item.speciality"
+          :detailUrl="item.videoUrl"
           :editUrl="item.editUrl"
+          :id="item.id"
+          :record="item"
           @delete-ok=" deleteOk(item) "
+          @updateList="updateList"
         ></vm-card>
       </a-col>
     </a-row>
+    <actor-modal ref="modalForm" @ok="modalFormOk" @updateList="updateList"></actor-modal>
   </div>
 </template>
 
@@ -82,13 +96,17 @@
 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'
+import actorModal from './ActorModal'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 export default {
   name: 'VmImageList',
   components: {
     ACol,
     ARow,
-    VmCard
+    VmCard,
+    actorModal
   },
+  mixins: [JeecgListMixin],
   props: {
     title: {
       type: String,
@@ -109,6 +127,12 @@ export default {
           }
         ]
       }
+    },
+    total: {
+      type: Number,
+      default() {
+        return 0
+      }
     }
   },
   data: function() {
@@ -116,34 +140,88 @@ export default {
       keyword: '', // keyword for search
       dataShow: [], // data for showing
       showNum: 8, // number of item per page
-      currentPage: 1
+      currentPage: 1,
+      url: {
+        list: '/ctop/actor/list'
+      },
+      columns: [
+        {
+          title: 'ID',
+          align: 'center',
+          dataIndex: 'id'
+        },
+        {
+          title: '姓名',
+          align: 'center',
+          dataIndex: 'name'
+        },
+        {
+          title: '生日',
+          align: 'center',
+          dataIndex: 'birthday'
+        },
+        {
+          title: '性别',
+          align: 'center',
+          dataIndex: 'sex_dictText'
+        },
+        {
+          title: '特长',
+          align: 'center',
+          dataIndex: 'speciality'
+        },
+        {
+          title: '创建时间',
+          align: 'center',
+          dataIndex: 'createTime'
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          scopedSlots: { customRender: 'action' }
+        }
+      ]
     }
   },
   methods: {
+    updateList() {
+      this.$emit('updateList')
+    },
     updateDataShow: function() {
       let startPage = (this.currentPage - 1) * this.showNum
       let endPage = startPage + this.showNum
       this.dataShow = this.data.slice(startPage, endPage)
     },
     pageChange: function(page) {
+      console.log(page)
       this.currentPage = page
+
       this.updateDataShow()
+      this.$emit('getList', page)
     },
-    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
-          }
-        }
-      })
-    },
+    // 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)
+    },
+    search() {
+      if (this.keyword) {
+        this.$emit('getList', 1, this.keyword + '')
+      } else {
+        this.$emit('getList')
+      }
     }
   },
   watch: {

+ 16 - 2
src/views/modules/appad/AdList.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-row :gutter="10">
+  <a-row :gutter="10" class="list-pubu">
     <a-col :sm="24" style="margin-bottom: 20px;z-index: 10">
       <a-card :bordered="false">
         <div class="table-page-search-wrapper">
@@ -347,7 +347,7 @@ export default {
           }
         }
       })
-    },
+    }
   },
   created() {
     this.getData()
@@ -411,4 +411,18 @@ export default {
   color: #1890ff;
   font-size: 40px;
 }
+</style>
+<style>
+.list-pubu .ball-beat {
+  height: 100px;
+}
+.list-pubu .loading {
+  position: fixed !important;
+  z-index: 10 !important;
+  left: 60% !important;
+  bottom: 0 !important;
+}
+.sider.light {
+  z-index: 11;
+}
 </style>

+ 149 - 128
src/views/modules/image/ImageList.vue

@@ -1,138 +1,159 @@
 <template>
-  <vm-image-list :data="dataImageList" @delete-ok="deletefn" class="vm-margin"></vm-image-list>
+  <vm-image-list
+    :data="dataImageList"
+    :total="total"
+    @delete-ok="deletefn"
+    class="vm-margin"
+    @getList="getActorList"
+    @updateList="getActorList(1,'')"
+  ></vm-image-list>
 </template>
 
 <script>
-  import VmImageList from '@/components/ctop/vm-image-list'
-  import {actorList} from "@/api/actor"
-  export default {
-    name: 'ImageList',
-    components: {
-      VmImageList
-    },
-    mounted(){
-        this.$nextTick(()=>{
-            this.getActorList()
-        })
-    },
-    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)
-          }
+import VmImageList from '@/components/ctop/vm-image-list'
+import { actorList  } from '@/api/actor'
+export default {
+  name: 'ImageList',
+  components: {
+    VmImageList
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.getActorList(1)
+    })
+  },
+  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)
         }
-      },
-      getActorList(){
-          
-          actorList({pageSize:8}).then(res =>{
-              if(res.code == 0){
-                  this.dataImageList.push(...res.result.records)
-              }
-          })
       }
     },
-    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'
-          }
-        ]
-      }
+    getActorList(page,name) {
+      this.dataImageList = []
+      actorList({ pageNo: page, pageSize: 8,name:name }).then(res => {
+        if (res.code == 0) {
+          this.dataImageList = res.result.records
+          this.total = res.result.total
+        }
+      })
+    }
+  },
+  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'
+        }
+      ],
+      total: null
     }
   }
+}
 </script>

+ 335 - 72
src/views/modules/yard/YardList.vue

@@ -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>
   <a-card :bordered="false">
-
     <!-- 查询区域 -->
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
@@ -14,10 +47,14 @@
           <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>
+              <a-button
+                type="primary"
+                @click="searchReset"
+                icon="reload"
+                style="margin-left: 8px"
+              >重置</a-button>
             </span>
           </a-col>
-
         </a-row>
       </a-form>
     </div>
@@ -25,12 +62,10 @@
     <!-- 操作按钮区域 -->
     <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"
@@ -39,101 +74,329 @@
         :columns="columns"
         :dataSource="dataSource"
         :pagination="ipagination"
-        :loading="loading">
-
+        :loading="loading"
+      >
         <!-- 字符串超长截取省略号显示-->
         <span slot="esContent" slot-scope="text">
-          <j-ellipsis :value="text" :length="10"/>
+          <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-divider type="vertical" />
           <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-item v-show="show">
+              <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 {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>
 <style  scoped>
-  @import '~@assets/less/common.less'
+@import '~@assets/less/common.less';
 </style>

+ 248 - 0
src/views/modules/yard/modules/yardDetail.vue

@@ -0,0 +1,248 @@
+<style>
+.ping .ant-modal-content .ant-modal-footer {
+  display: none !important;
+}
+.ping .ant-list-item-content {
+  justify-content: space-between;
+  cursor: pointer;
+}
+.ping-list .detele {
+  display: none;
+}
+/* .ping-list:hover span {
+  display: block;
+} */
+.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>
+  <div>
+    <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>
+  </div>
+</template>
+<script>
+import moment from 'moment'
+import {
+
+} from '@/api/actor'
+import UploadToAli from '@femessage/upload-to-ali'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import { closeAllVideoFun } from '@/utils/videoControl'
+export default {
+  name: 'VmCard',
+  mixins: [JeecgListMixin],
+  components: {
+    UploadToAli
+  },
+  props: {},
+  data: function() {
+    return {
+      addPhoto: false,
+      addVideo: false,
+      indexDetail: '1',
+      to: null,
+      comments: [],
+      submitting: false,
+      value: '',
+      moment,
+      visible: false,
+      detail: false,
+      customDomain: '',
+      region: 'oss-cn-beijing',
+      bucket: 'ctop-media',
+      acceptVideo: 'video/mpeg,video/mp4',
+      acceptImage: 'image/jpeg,image/jpg,image/png',
+      accessKeyId: 'LTAIbNbqWzSOklQV',
+      accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
+      form: {
+        name: '',
+        birthday: '',
+        sex: null,
+        speciality: ''
+      },
+      noImgUrl: require('@/assets/img/noImg.png'),
+      loginInfo: JSON.parse(localStorage.getItem('pro__Login_Userinfo')),
+      photoList: [],
+      imageUrl: '',
+      videoUrl: '',
+      total: 1,
+      videoTotal: 1,
+      pageSize: 4,
+      url: {
+        list: '/ctop/actor/list'
+      },
+      columns: [
+        {
+          title: 'ID',
+          align: 'center',
+          dataIndex: 'id'
+        },
+        {
+          title: '姓名',
+          align: 'center',
+          dataIndex: 'name'
+        },
+        {
+          title: '生日',
+          align: 'center',
+          dataIndex: 'birthday'
+        },
+        {
+          title: '性别',
+          align: 'center',
+          dataIndex: 'sex_dictText'
+        },
+        {
+          title: '特长',
+          align: 'center',
+          dataIndex: 'speciality'
+        },
+        {
+          title: '创建时间',
+          align: 'center',
+          dataIndex: 'createTime'
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      currentPage: 1,
+      videoList: []
+    }
+  },
+  methods: {
+      show(){
+          this.detail=true
+      },
+      callback(){
+
+      }
+  }
+}
+</script>