Browse Source

完善演员功能

zhuxinbo 5 years ago
parent
commit
1e43a98ba1

+ 9 - 0
src/api/actor.js

@@ -48,3 +48,12 @@ export function actorCommentDetele(parameter) {
         params: parameter
     })
 }
+
+
+export function actorVideoList(parameter) {
+    return axios({
+        url: "/ctop/actor/video/list",
+        method: 'get',
+        params: parameter
+    })
+}

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

@@ -0,0 +1,209 @@
+<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="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 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: [],
+        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) {
+
+        let that = this;
+        that.form.resetFields();
+        that.model = Object.assign({}, record);
+        that.visible = true;
+        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.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")
+              } else {
+                that.$message.warning(res.message);
+              }
+            }).finally(() => {
+              that.confirmLoading = false;
+              that.close();
+            })
+
+
+          }
+        })
+      },
+      handleCancel() {
+        this.close()
+      },
+
+
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+
+</style>

+ 113 - 10
src/components/ctop/vm-card.vue

@@ -28,13 +28,14 @@ li {
     margin: 10px;
     position: relative;
     height: 250px;
-    img {
+    img,video {
       width: 100%;
       margin-top: auto;
       margin-bottom: auto;
       top: 0;
       bottom: 0;
       position: absolute;
+      max-height: 250px;
     }
   }
 }
@@ -50,7 +51,7 @@ li {
       <div v-if="editable && type == 'vertical'" class="control">
         <span class="edit">
           <a :href="editUrl">
-            <a-icon type="edit"></a-icon>
+            <a-icon type="edit" @click="handleDetail(record)"></a-icon>
           </a>
         </span>
         <span class="delete">
@@ -122,7 +123,7 @@ li {
                   <span>{{form.name}}</span>
                 </a-form-item>
                 <a-form-item label="性别" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
-                  <span>{{form.sex==1?"女":"男"}}</span>
+                  <span>{{form.sex==1?"男":"女"}}</span>
                 </a-form-item>
                 <a-form-item label="出生年月" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                   <span>{{form.birthday}}</span>
@@ -147,19 +148,44 @@ li {
             </ul>
           </div>
           <div style="text-align:right">
-            <a-pagination :total="total" :pageSize.sync="pageSize"/>
+            <a-pagination showQuickJumper :total="total" @change="pageChange" :pageSize.sync="pageSize"/>
+          </div>
+        </a-tab-pane>
+        <a-tab-pane tab="演员作品" key="3">
+            <div>
+            <ul class="actor-photo-list">
+              <li v-for="(item,index) of videoList" :key="index">
+                  <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-tab-pane tab="演员作品" key="3">Content of Tab Pane 3</a-tab-pane>
       </a-tabs>
     </a-modal>
+    <actor-modal ref="modalForm" @ok="modalFormOk" @updateList="updateList"></actor-modal>
   </div>
 </template>
 <script>
 import moment from 'moment'
-import { actorDetail, actorCommentList, actorCommentAdd, actorCommentDetele, actorPhotoList } from '@/api/actor'
+import { actorDetail, actorCommentList, actorCommentAdd, actorCommentDetele, actorPhotoList,actorVideoList } from '@/api/actor'
+import actorModal from './ActorModal'
+import {JeecgListMixin} from '@/mixins/JeecgListMixin'
+import {closeAllVideoFun} from '@/utils/videoControl'
 export default {
   name: 'VmCard',
+  mixins: [JeecgListMixin],
+  components: {
+    actorModal
+  },
   props: {
     type: {
       type: String,
@@ -194,6 +220,11 @@ export default {
       default() {
         return 0
       }
+    },
+    record:{
+        default(){
+            return {}
+        }
     }
   },
   data: function() {
@@ -204,7 +235,7 @@ export default {
       value: '',
       moment,
       visible: false,
-      detail: true,
+      detail: false,
       form: {
         name: '',
         birthday: '',
@@ -215,10 +246,63 @@ export default {
       loginInfo: JSON.parse(localStorage.getItem('pro__Login_Userinfo')),
       photoList: [],
       total: 1,
-      pageSize:4
+      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: {
+    updateList(){
+        this.$emit("updateList")
+    },
+    pageChange: function(page) {
+      console.log(page)
+      this.currentPage = page
+
+      this.getPhoto()
+    },
     handleSubmit() {
       if (!this.value) {
         return
@@ -272,14 +356,33 @@ export default {
     callback(key) {
       console.log(key)
       if (key == '2') {
-        actorPhotoList({ pageNo: 1, pageSize: 4 }).then(res => {
+        closeAllVideoFun()
+        this.currentPage = 1
+        this.getPhoto()
+      }else if(key == '3'){
+        this.currentPage = 1
+        this.getVideo()
+      }else if(key == '1'){
+        closeAllVideoFun()
+      }
+    },
+    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
+          }
+        })
     }
   }
 }

+ 54 - 2
src/components/ctop/vm-image-list.vue

@@ -38,6 +38,7 @@
       <div class="panel-heading">{{ title }}</div>
       <a-row type="flex" align="middle" justify="space-between" class="panel-body">
         <div class="search-bar">
+            <a-button @click="handleAdd" type="primary" icon="plus" style="margin-right:10px">新增</a-button>
           <a-input placeholder="请输入搜索内容" v-model="keyword" style="width: 300px"></a-input>
           <!--          <Button type="ghost" @click="search"><i class="fa fa-search"></i></Button>-->
         </div>
@@ -74,10 +75,13 @@
           :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>
 
@@ -85,13 +89,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,
@@ -125,10 +133,54 @@ 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

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

@@ -5,6 +5,7 @@
     @delete-ok="deletefn"
     class="vm-margin"
     @getList="getActorList"
+    @updateList="getActorList(1)"
   ></vm-image-list>
 </template>
 
@@ -30,6 +31,7 @@ export default {
       }
     },
     getActorList(page) {
+      this.dataImageList = []
       actorList({ pageNo: page, pageSize: 8 }).then(res => {
         if (res.code == 0) {
           this.dataImageList = res.result.records