浏览代码

上传到cos组件完成

zhuxinbo 5 年之前
父节点
当前提交
7e1a143d70

+ 9 - 0
src/api/actor.js

@@ -8,6 +8,15 @@ export function actorList(parameter) {
       params: parameter
     })
 }
+
+export function propList(parameter) {
+    return axios({
+      url: "/ctop/prop/list",
+      method: 'get',
+      params: parameter
+    })
+}
+
 export function actorPhotoList(parameter) {
     return axios({
       url: "/ctop/actor/photo/list",

+ 24 - 0
src/components/README.md

@@ -39,3 +39,27 @@ UserMenu.vue:首页右上侧的内容
 ![输入图片说明](https://static.oschina.net/uploads/img/201904/12201226_laQK.png "在这里输入图片标题")
 ####16.trend包 趋势显示组件(如下图)
 ![输入图片说明](https://static.oschina.net/uploads/img/201904/12201600_Wo8K.png "在这里输入图片标题")
+
+
+uploadFile.vue  组件使用
+1.在需要使用组件的地方引入    import uploadFile from '@/components/uploadFile.vue'
+并且在components中定义这个组件 components:{uploadFile}
+2.在页面中使用
+  参数  uploadType:上传类型   默认为image     值  image/video
+        multiple:是否能多个上传,uploadType为video时,最好值为false  默认为true   值  true/false
+        fileCount:能上传的最大数量    默认值为10,可随意修改为大于0的值
+        checkFile:页面中上传方法进行判断                             
+  <uploadFile :checkFile="checkFile" @overUpload="overUpload" @removeUpload="removeUpload" />  
+      <!-- uploadType="video" :multiple="false" -->
+      overUpload(overFile) {
+        console.log(overFile)
+      },
+      removeUpload(removeFile) {
+        console.log(removeFile)
+      },
+      checkFile(file) {
+        console.log(file)
+        return new Promise(function (resolve, reject) {
+            resolve()//只有在promise中返回resolve()才会继续进行上传
+        })
+      }

+ 192 - 0
src/components/uploadFile.vue

@@ -0,0 +1,192 @@
+<style>
+</style>
+<style lang="scss" scoped>
+</style>
+<template>
+  <div class="upload-file">
+    <a-upload name="file" :multiple="multiple" list-type="picture-card" class="avatar-uploader"
+      action="https://media-1301855440.cos.ap-chongqing.myqcloud.com/" :before-upload="beforeUpload"
+      @change="handleChange" :accept="uploadType+'/*'" :file-list="fileList" :remove="removeFile"
+      @preview="handlePreview" :disabled="loadingElse">
+      <div v-if="uploadType=='image'?fileList.length < fileCount:fileList.length<1">
+        <a-progress v-if='loadingElse' :percent="percent" :show-info="false" />
+        <div class="ant-upload-text">
+          Upload
+        </div>
+      </div>
+    </a-upload>
+    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
+      <img alt="example" style="width: 100%" :src="previewImage" v-if="uploadType=='image'" />
+      <video :src="previewImage" v-else style="width: 100%" controls="controls">您的浏览器不支持 video 标签。</video>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+  import {
+    stopOtherVideo,
+    closeAllVideoFun
+  } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
+  import {
+    mapGetters
+  } from 'vuex'
+  import moment from 'moment'
+
+  import BMF from 'browser-md5-file'
+  import qs from 'qs'
+  var COS = require('cos-js-sdk-v5');
+  var cos = new COS({
+    SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
+    SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9',
+  });
+  var i = 0
+
+  function getBase64(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = error => reject(error);
+    });
+  }
+  export default {
+    name: 'upload-file',
+    components: {},
+    props: {
+      uploadType: { //上传类型  值为  image/video,同时目录名称也是这样
+        type: String,
+        default () {
+          return 'image'
+        }
+      },
+      multiple: { // true 可以批量上传  false 不可以
+        type: Boolean,
+        default () {
+          return true
+        }
+      },
+      fileCount: { //最大上传数量
+        type: Number,
+        default () {
+          return 10
+        }
+      },
+      checkFile: { //返回promise方法,判读文件是否上传过,进行上传拦截
+        type: Function,
+        default (file) {
+          return Promise.resolve()
+        }
+      }
+    },
+    data() {
+      return {
+        fileList: [], //链接集合
+        loadingElse: false,
+        imageUrl: '',
+        percent: 0,
+        previewVisible: false,
+        previewImage: '',
+      }
+    },
+    filters: {},
+    computed: {},
+    created() {},
+    watch: {},
+    methods: {
+      handleCancel() {
+        closeAllVideoFun()
+        this.previewVisible = false;
+      },
+      handleChange(info) {
+        if (info.file.status === 'uploading') {
+          this.loading = true;
+          return;
+        }
+        if (info.file.status === 'done') {
+          // Get this url from response in real world.
+          getBase64(info.file.originFileObj, imageUrl => {
+            this.imageUrl = imageUrl;
+            this.loading = false;
+          });
+        }
+      },
+      removeFile(file) {
+        console.log(file)
+        var index = this.fileList.findIndex(v => v.uid === file.uid)
+        this.fileList.splice(index, 1)
+        this.$emit('removeUpload', file)
+      },
+      async handlePreview(file) {
+        if (!file.url && !file.preview) {
+          file.preview = await getBase64(file.originFileObj);
+        }
+        this.previewImage = file.url || file.preview;
+        this.previewVisible = true;
+      },
+      beforeUpload(file) {
+        this.percent = 0
+        this.loadingElse = true
+        this.checkFile(file).then(res => {
+          this.cosUpload(file)
+
+        })
+        return new Promise(function (resolve, reject) {
+          reject()
+        })
+
+      },
+      cosUpload(file) {
+        var that = this
+        let date = new Date()
+        let y = date.getFullYear()
+        let MM = date.getMonth() + 1
+        MM = MM < 10 ? '0' + MM : MM
+        let d = date.getDate()
+        d = d < 10 ? '0' + d : d
+        cos.putObject({
+          Bucket: 'media-1301855440',
+          /* 必须 */
+          Region: 'ap-chongqing',
+          /* 存储桶所在地域,必须字段 */
+          Key: that.uploadType + y + '-' + MM + '-' + d + '/' + file.name,
+          /* 必须 */
+          StorageClass: 'STANDARD',
+          Body: file, // 上传文件对象
+          onProgress: function (progressData) { //进度条方法
+
+            that.percent = (progressData.percent * 100)
+          },
+          onTaskReady: function (tid) {
+            // console.log('onTaskReady', tid);
+          },
+          onTaskStart: function (info) { //开始上传
+            // console.log('onTaskStart', info);
+          },
+        }, function (err, data) {
+          if (err) {
+            that.loadingElse = false
+            that.$message.error('上传失败!!!' + err)
+            return;
+          }
+          // alert('成功')
+          that.loadingElse = false
+          if (that.fileList.length < that.fileCount) {
+            that.fileList.push({
+              uid: i++,
+              name: file.name,
+              status: 'done',
+              url: 'http://' + data.Location,
+            })
+            that.$emit('overUpload', that.fileList)
+          } else {
+            that.$message.error('上传已达上限' + that.fileCount + '张')
+          }
+
+        });
+      }
+    }
+  }
+</script>
+<style scoped>
+  @import '~@assets/less/common.less';
+</style>

+ 6 - 1
src/views/modules/kuaishouapp/account/advertisingGroup.vue

@@ -94,7 +94,12 @@
                 onChange: onSelectChange
               }" style="margin-top:30px" :loading="loadingList">
               <!-- getCheckboxProps: getCheckboxProps -->
-              <a slot="unitName" slot-scope="text, record" @click="toDetail(record)">{{ text }}</a>
+              <a slot="unitName" slot-scope="text, record" @click="toDetail(record)" :title="text">
+                <span
+                  style="display:block;width:250px !important;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
+                  {{ text }}</span>
+
+              </a>
               <span slot="action" slot-scope="text, record">
                 <a-switch v-model="record.showSwich" @change="onChangeSwitch(record)" />
               </span>

+ 1 - 1
src/views/modules/kuaishouapp/account/copyGroup.vue

@@ -412,7 +412,7 @@
             this.allForm.group[index].showTipCheck = false
           }
         } else {
-          if (this.allForm.group[index].cpaBid < 5 || this.allForm.group[index].cpaBid > this.maxBid) {
+          if (this.allForm.group[index].cpaBid < 1 || this.allForm.group[index].cpaBid > this.maxBid) {
             this.allForm.group[index].showTipCheck = true
           } else {
             this.allForm.group[index].showTipCheck = false

+ 17 - 31
src/views/modules/kuaishouapp/account/editGroup.vue

@@ -45,9 +45,9 @@
       <a-form-item label="转化类型" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
         :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }" v-if="campaignType == '3'">
         <a-radio-group buttonStyle="solid"
-          v-decorator="['urlType', { rules: [{ required: true, message: '请选择目标应用' }], initialValue: '1' }]">
-          <a-radio-button value="1">淘宝商品</a-radio-button>
-          <a-radio-button value="2">淘客商品</a-radio-button>
+          v-decorator="['urlType', { rules: [{ required: true, message: '请选择目标应用' }], initialValue:1 }]">
+          <a-radio-button :value="1">淘宝商品</a-radio-button>
+          <a-radio-button :value="2">淘客商品</a-radio-button>
         </a-radio-group>
       </a-form-item>
       <a-form-item :label="campaignType == '3' ? ' ' : '链接'" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
@@ -161,17 +161,17 @@
       <a-form-item label="场景广告位" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
         :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
         <!-- v-decorator="['speed', { initialValue: '1' }]" -->
-        <a-radio-group buttonStyle="solid" v-decorator="['sceneId', { initialValue: '1' }]">
-          <a-radio-button value="1">优选广告位</a-radio-button>
-          <a-radio-button value="2">按场景选择广告位</a-radio-button>
+        <a-radio-group buttonStyle="solid" :disabled="typeCopy=='edit'" v-decorator="['sceneId', { initialValue: 1 }]">
+          <a-radio-button :value="1">优选广告位</a-radio-button>
+          <a-radio-button :value="2">按场景选择广告位</a-radio-button>
         </a-radio-group>
         <!-- getData('speed') == '2' -->
         <br>
 
       </a-form-item>
       <a-form-item label=" " :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
-        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }" class="else-label" v-if="getData('sceneId') == '2'">
-        <a-checkbox-group :defaultValue="[7]" v-model="allForm.sceneId">
+        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }" class="else-label" v-if="getData('sceneId') == 2">
+        <a-checkbox-group :disabled="typeCopy=='edit'" :defaultValue="[7]" v-model="allForm.sceneId">
           <a-checkbox :value="7">信息流广告</a-checkbox>
           <a-checkbox :value="6">上下滑大屏广告</a-checkbox>
           <a-checkbox :value="3">视频播放页广告</a-checkbox>
@@ -263,7 +263,7 @@
       </a-form-item>
     </a-form>
     <template slot="footer">
-      <a-button key="submit" type="primary" @click="handleSubmit" :loading="loading">
+      <a-button type="primary" @click="handleSubmit" :loading="loading">
         确定
       </a-button>
     </template>
@@ -412,7 +412,7 @@
             this.allForm.group[index].showTipCheck = false
           }
         } else {
-          if (this.allForm.group[index].cpaBid < 5 || this.allForm.group[index].cpaBid > this.maxBid) {
+          if (this.allForm.group[index].cpaBid < 1 || this.allForm.group[index].cpaBid > this.maxBid) {
             this.allForm.group[index].showTipCheck = true
           } else {
             this.allForm.group[index].showTipCheck = false
@@ -560,11 +560,11 @@
             }
             //   dataJson.useAppMarket = dataJson.useAppMarket==0?false:true
             dataJson.dayBudget = dataJson.dayBudget / 1000
-            dataJson.sceneId = JSON.parse(dataJson.sceneId)[0] == '1' ? '1' : '2'
+            dataJson.sceneId = JSON.parse(dataJson.sceneId)[0] == 1 ? 1 : 2
             this.allForm.useAppMarket = dataJson.useAppMarket ? (dataJson.useAppMarket == 0 ? false : true) : false
-            this.allForm.sceneId = JSON.parse(dataJson.sceneId)[0] == '1' ? [7] : JSON.parse(res.result.baseInfo
+            this.allForm.sceneId = dataJson.sceneId == 1 ? [7] : JSON.parse(res.result.baseInfo
               .sceneId)
-            console.log(this.allForm.sceneId)
+            console.log(this.allForm.sceneId, 1111111)
             this.allForm.dayBudget = dataJson.dayBudget == 0 ? '0' : '1'
             this.allForm.time = dataJson.endTime ? '2' : '1'
             this.timeRange = [moment(dataJson.beginTime), moment(dataJson.endTime)]
@@ -644,7 +644,7 @@
 
         e.preventDefault()
         this.$refs.population.handleSubmit()
-        this.form.validateFields((err, values) => {
+        this.form.validateFieldsAndScroll((err, values) => {
           if (!err) {
             this.loading = true
             var groupArr = this.allForm.group.map(item => {
@@ -724,6 +724,7 @@
 
           }
         })
+
       },
       onChange(e) {
         this.allForm.useAppMarket = e.target.checked
@@ -761,7 +762,7 @@
         return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
       },
       prevStep() {
-        this.$emit('prevStep', this.campaignId ? this.campaignId : localStorage.getItem('campaignId'))
+        this.$emit('prevStep', this.campaignId ? this.campaignId : localStorage.getItem('advertisingGroupKey'))
       },
       getMould() {
         let params = {}
@@ -793,25 +794,10 @@
           }
         })
       },
-      // getPeople(e) {
-      //   console.log(e.target.value)
-      //   if (e.target.value == 3) {
-      //     getAction('/kuaishou/batch/getPopulationList', { accountId: localStorage.getItem('accountId') }).then(res => {
-      //       if (res.success) {
-      //         this.data = res.result.map((item, index) => {
-      //           return {
-      //             ...item,
-      //             key: index
-      //           }
-      //         })
-      //       }
-      //     })
-      //   }
-      // },
       getCampaignList() {
         var params = {}
         params.accountId = localStorage.getItem('accountId')
-        params.campaignId = this.campaignId ? this.campaignId : localStorage.getItem('campaignId')
+        params.campaignId = this.campaignId ? this.campaignId : localStorage.getItem('advertisingGroupKey')
         getAction('/kuaishou/batch/getCampaignList', params).then(res => {
           if (res.success) {
             this.campaignType = res.result.records[0].campaignType

+ 14 - 30
src/views/modules/kuaishouapp/account/editGroupNew.vue

@@ -45,9 +45,9 @@
       <a-form-item label="转化类型" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
         :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }" v-if="campaignType == '3'">
         <a-radio-group buttonStyle="solid"
-          v-decorator="['urlType', { rules: [{ required: true, message: '请选择目标应用' }], initialValue: '1' }]">
-          <a-radio-button value="1">淘宝商品</a-radio-button>
-          <a-radio-button value="2">淘客商品</a-radio-button>
+          v-decorator="['urlType', { rules: [{ required: true, message: '请选择目标应用' }], initialValue: 1 }]">
+          <a-radio-button :value="1">淘宝商品</a-radio-button>
+          <a-radio-button :value="2">淘客商品</a-radio-button>
         </a-radio-group>
       </a-form-item>
       <a-form-item :label="campaignType == '3' ? ' ' : '链接'" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
@@ -161,16 +161,16 @@
       <a-form-item label="场景广告位" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
         :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
         <!-- v-decorator="['speed', { initialValue: '1' }]" -->
-        <a-radio-group buttonStyle="solid" v-decorator="['sceneId', { initialValue: '1' }]">
-          <a-radio-button value="1">优选广告位</a-radio-button>
-          <a-radio-button value="2">按场景选择广告位</a-radio-button>
+        <a-radio-group buttonStyle="solid" v-decorator="['sceneId', { initialValue: 1 }]">
+          <a-radio-button :value="1">优选广告位</a-radio-button>
+          <a-radio-button :value="2">按场景选择广告位</a-radio-button>
         </a-radio-group>
         <!-- getData('speed') == '2' -->
         <br>
 
       </a-form-item>
       <a-form-item label=" " :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
-        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }" class="else-label" v-if="getData('sceneId') == '2'">
+        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }" class="else-label" v-if="getData('sceneId') == 2">
         <a-checkbox-group :defaultValue="[7]" v-model="allForm.sceneId">
           <a-checkbox :value="7">信息流广告</a-checkbox>
           <a-checkbox :value="6">上下滑大屏广告</a-checkbox>
@@ -435,7 +435,7 @@
             this.allForm.group[index].showTipCheck = false
           }
         } else {
-          if (this.allForm.group[index].cpaBid < 5 || this.allForm.group[index].cpaBid > this.maxBid) {
+          if (this.allForm.group[index].cpaBid < 1 || this.allForm.group[index].cpaBid > this.maxBid) {
             this.allForm.group[index].showTipCheck = true
           } else {
             this.allForm.group[index].showTipCheck = false
@@ -584,11 +584,10 @@
             }
             //   dataJson.useAppMarket = dataJson.useAppMarket==0?false:true
             dataJson.dayBudget = dataJson.dayBudget / 1000
-            dataJson.sceneId = JSON.parse(dataJson.sceneId)[0] == '1' ? '1' : '2'
+            dataJson.sceneId = JSON.parse(dataJson.sceneId)[0] == 1 ? 1 : 2
             this.allForm.useAppMarket = dataJson.useAppMarket ? (dataJson.useAppMarket == 0 ? false : true) : false
-            this.allForm.sceneId = JSON.parse(dataJson.sceneId)[0] == '1' ? [7] : JSON.parse(res.result.baseInfo
+            this.allForm.sceneId = dataJson.sceneId == 1 ? [7] : JSON.parse(res.result.baseInfo
               .sceneId)
-            console.log(this.allForm.sceneId)
             this.allForm.dayBudget = dataJson.dayBudget == 0 ? '0' : '1'
             this.allForm.time = dataJson.endTime ? '2' : '1'
             this.timeRange = [moment(dataJson.beginTime), moment(dataJson.endTime)]
@@ -725,7 +724,7 @@
               postAction('/kuaishou/batch/copyUnitUpdate', param).then(res => {
                 if (res.success) {
                   if (res.result.failInfo.length > 0) {
-                    this.form.setFieldsValue(pick(param, ['sceneId']))
+                    // this.form.setFieldsValue(pick(param, ['sceneId']))
                     this.loading = false
                     this.visibleData = res.result
                     this.visibleFail = true
@@ -771,7 +770,7 @@
               postAction('/kuaishou/batch/copyUnitUpdate', params).then(res => {
                 if (res.success) {
                   if (res.result.failInfo.length > 0) {
-                    this.form.setFieldsValue(pick(params, ['sceneId']))
+                    // this.form.setFieldsValue(pick(params, ['sceneId']))
                     this.loading = false
                     this.visibleData = res.result
                     this.visibleFail = true
@@ -831,7 +830,7 @@
         return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
       },
       prevStep() {
-        this.$emit('prevStep', this.campaignId ? this.campaignId : localStorage.getItem('campaignId'))
+        this.$emit('prevStep', this.campaignId ? this.campaignId : localStorage.getItem('advertisingGroupKey'))
       },
       getMould() {
         let params = {}
@@ -863,25 +862,10 @@
           }
         })
       },
-      // getPeople(e) {
-      //   console.log(e.target.value)
-      //   if (e.target.value == 3) {
-      //     getAction('/kuaishou/batch/getPopulationList', { accountId: localStorage.getItem('accountId') }).then(res => {
-      //       if (res.success) {
-      //         this.data = res.result.map((item, index) => {
-      //           return {
-      //             ...item,
-      //             key: index
-      //           }
-      //         })
-      //       }
-      //     })
-      //   }
-      // },
       getCampaignList() {
         var params = {}
         params.accountId = localStorage.getItem('accountId')
-        params.campaignId = this.campaignId ? this.campaignId : localStorage.getItem('campaignId')
+        params.campaignId = this.campaignId ? this.campaignId : localStorage.getItem('advertisingGroupKey')
         getAction('/kuaishou/batch/getCampaignList', params).then(res => {
           if (res.success) {
             this.campaignType = res.result.records[0].campaignType

+ 1 - 1
src/views/modules/kuaishouapp/account/stepForm/Step2.vue

@@ -653,7 +653,7 @@
             this.allForm.group[index].showTipCheck = false
           }
         } else {
-          if (this.allForm.group[index].cpaBid < 5 || this.allForm.group[index].cpaBid > this.maxBid) {
+          if (this.allForm.group[index].cpaBid < 1 || this.allForm.group[index].cpaBid > this.maxBid) {
             this.allForm.group[index].showTipCheck = true
           } else {
             this.allForm.group[index].showTipCheck = false

+ 8 - 8
src/views/modules/kuaishouapp/account/stepForm/stepModule/targetedPopulation.vue

@@ -35,7 +35,7 @@ li:hover {
 }
 </style>
 <template>
-  <a-form :form="form" class="module-form" @submit="handleSubmit">
+  <a-form :form="formAll" class="module-form" @submit="handleSubmit">
     <a-form-item
       label="自定义人群"
       :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
@@ -747,7 +747,7 @@ export default {
             }
           })
           this.$nextTick(() => {
-            this.form.setFieldsValue(
+            this.formAll.setFieldsValue(
               pick(n, [
                 'fansStar',
                 'interestVideo',
@@ -765,7 +765,7 @@ export default {
             )
           })
         } else {
-          this.form.resetFields()
+          this.formAll.resetFields()
           this.selectedRowKeys = []
           this.selectedRowKeysNo = []
           this.selectedRowKeysValueNo = []
@@ -796,7 +796,7 @@ export default {
   directives: { clickoutside },
   data() {
     return {
-      form: this.$form.createForm(this),
+      formAll: this.$form.createForm(this),
       marks: {
         5: '5岁',
         10: '10岁',
@@ -1031,7 +1031,7 @@ export default {
     },
     handleSubmit() {
       //   e.preventDefault()
-      this.form.validateFields((err, values) => {
+      this.formAll.validateFields((err, values) => {
         if (!err) {
           //   this.checkArr
           var json = {}
@@ -1127,7 +1127,7 @@ export default {
     },
     getAppType(e) {
       this.optionsApp = []
-      this.form.setFieldsValue({ appInterest: [] })
+      this.formAll.setFieldsValue({ appInterest: [] })
       this.checkArr = []
       if (e.target.value == '1') {
         getAction('/kuaishou/batch/getTargetList', { tagType: 'APP_INTEREST' }).then(res => {
@@ -1138,7 +1138,7 @@ export default {
       }
     },
     businessInterest(e) {
-      this.form.setFieldsValue({ businessInterest: [] })
+      this.formAll.setFieldsValue({ businessInterest: [] })
       if (e.target.value == '2') {
         this.getDataType('BUSINESS_INTEREST', 'businessOptions')
       }
@@ -1164,7 +1164,7 @@ export default {
       })
     },
     getData(className) {
-      return this.form.getFieldValue(className)
+      return this.formAll.getFieldValue(className)
     }
   },
   mounted: function() {

+ 88 - 43
src/views/modules/material/fragmentMatemal.vue

@@ -189,26 +189,6 @@
               </a-select>
             </a-form-item>
           </a-col>
-          <!-- <a-col :md="6" :sm="8">
-            <a-form-item label="创建者">
-              <a-input placeholder="请输入创建者名称" v-model="queryParam.advertiserId"></a-input>
-            </a-form-item>
-          </a-col> -->
-          <!-- <a-col :md="6" :sm="8">
-            <a-form-item label="剪辑">
-              <a-input placeholder="请输入剪辑者名称" v-model="queryParam.advertiserId"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :md="6" :sm="8">
-            <a-form-item label="编导">
-              <a-input placeholder="请输入编导" v-model="queryParam.responsible"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :md="6" :sm="8">
-            <a-form-item label="拍摄">
-              <a-input placeholder="请输入拍摄" v-model="queryParam.responsible"></a-input>
-            </a-form-item>
-          </a-col> -->
           <a-col :md="6" :sm="8">
             <a-form-item label="时间选择">
               <a-date-picker v-model="queryParam.createTime" format="YYYY-MM-DD" style="width:100%" />
@@ -235,18 +215,20 @@
         checkAll ? '取消  (  ' + checkArr.length + '  )' : '全选'
       }}</a-button>
     </div>
-
-    <!-- <a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
-      :before-upload="beforeUpload" @change="handleChange">
-      <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
-      <div v-else>
-        <a-icon :type="loading ? 'loading' : 'plus'" />
+    <!-- :show-upload-list="false" -->
+    <!-- <a-upload name="file" :multiple="true" list-type="picture-card" class="avatar-uploader"
+      action="https://media-1301855440.cos.ap-chongqing.myqcloud.com/" :before-upload="beforeUpload"
+      @change="handleChange" accept='image/*' :file-list="fileList" :remove="removeFile" @preview="handlePreview">
+      <div>
+        <a-progress v-if='loadingElse' :percent="percent" :show-info="false" />
         <div class="ant-upload-text">
           Upload
         </div>
       </div>
     </a-upload> -->
-
+    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
+      <img alt="example" style="width: 100%" :src="previewImage" />
+    </a-modal>
     <a-tabs @change="callbackTwo" v-model="active" type="card" id="material-card">
       <a-tab-pane :tab="item.tab" v-for="item of examinelList" :key="item.value">
         <div v-if="item.value != 'join' && item.value != 'job' && item.value != 'success'">
@@ -526,6 +508,16 @@
     SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
     SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9',
   });
+  var i = 0
+
+  function getBase64(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = error => reject(error);
+    });
+  }
   export default {
     name: 'YardList',
     mixins: [JeecgListMixin],
@@ -538,6 +530,7 @@
 
     data() {
       return {
+        fileList: [],
         dragging: null,
         dataKey: 0,
         columns: [{
@@ -709,8 +702,11 @@
           content: [],
           foot: ''
         },
-        loading: false,
+        loadingElse: false,
         imageUrl: '',
+        percent: 0,
+        previewVisible: false,
+        previewImage: '',
       }
     },
     filters: {
@@ -761,6 +757,9 @@
       }
     },
     methods: {
+      handleCancel() {
+        this.previewVisible = false;
+      },
       handleChange(info) {
         if (info.file.status === 'uploading') {
           this.loading = true;
@@ -774,23 +773,69 @@
           });
         }
       },
+      removeFile(file) {
+        console.log(file)
+        var index = this.fileList.findIndex(v => v.uid === file.uid)
+        this.fileList.splice(index, 1)
+      },
+      async handlePreview(file) {
+        if (!file.url && !file.preview) {
+          file.preview = await getBase64(file.originFileObj);
+        }
+        this.previewImage = file.url || file.preview;
+        this.previewVisible = true;
+      },
       beforeUpload(file) {
         console.log(file)
-        cos.putObject({
-          Bucket: 'media-1301855440',
-          /* 必须 */
-          Region: 'ap-chongqing',
-          /* 存储桶所在地域,必须字段 */
-          Key: 'exampleobject',
-          /* 必须 */
-          StorageClass: 'STANDARD',
-          Body: file, // 上传文件对象
-          onProgress: function (progressData) {
-            console.log(JSON.stringify(progressData));
-          }
-        }, function (err, data) {
-          console.log(err || data);
-        });
+        this.loadingElse = true
+        var that = this
+        let date = new Date()
+        let y = date.getFullYear()
+        let MM = date.getMonth() + 1
+        MM = MM < 10 ? '0' + MM : MM
+        let d = date.getDate()
+        d = d < 10 ? '0' + d : d
+
+        return new Promise(function (resolve, reject) {
+          cos.putObject({
+            Bucket: 'media-1301855440',
+            /* 必须 */
+            Region: 'ap-chongqing',
+            /* 存储桶所在地域,必须字段 */
+            Key: 'image/' + y + '-' + MM + '-' + d + '/' + file.name,
+            /* 必须 */
+            StorageClass: 'STANDARD',
+            Body: file, // 上传文件对象
+            onProgress: function (progressData) {
+
+              console.log(typeof JSON.stringify(progressData));
+              console.log(progressData.percent);
+              that.percent = (progressData.percent * 100)
+            },
+            onTaskReady: function (tid) {
+              console.log('onTaskReady', tid);
+            },
+            onTaskStart: function (info) {
+              console.log('onTaskStart', info);
+            },
+          }, function (err, data) {
+            if (err) {
+              console.log(err);
+
+              return;
+            }
+            console.log('成功', data)
+            // alert('成功')
+            that.loadingElse = false
+            that.fileList.push({
+              uid: i++,
+              name: file.name,
+              status: 'done',
+              url: 'http://' + data.Location,
+            })
+          });
+        })
+        reject()
       },
 
 

+ 176 - 0
src/views/modules/prop/modules/ActorModal.vue

@@ -0,0 +1,176 @@
+<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">
+          <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="['desc']" />
+        </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/prop/add",
+          edit: "/ctop/prop/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', 'desc'))
+          //时间格式化
+        });
+
+      },
+      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.coverUrl = this.imageUrl[0]
+            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>

+ 232 - 0
src/views/modules/prop/modules/vm-image-list.vue

@@ -0,0 +1,232 @@
+<style>
+@media (min-width: 1024px) {
+  .checkbox_item_container {
+    width: 70%;
+  }
+} /*>=1024的设备*/
+
+@media (min-width: 1100px) {
+  .checkbox_item_container {
+    width: 70%;
+  }
+} /*>=1100的设备*/
+@media (min-width: 1280px) {
+  .checkbox_item_container_size {
+    width: 70%;
+  }
+}
+
+/*>=1280的设备*/
+
+@media (min-width: 1366px) {
+}
+
+@media (min-width: 1440px) {
+}
+
+@media (min-width: 1680px) {
+}
+@media (min-width: 1920px) {
+  .checkbox_item_container_size {
+    width: 50%;
+  }
+}
+</style>
+<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-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>
+          <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-pagination showQuickJumper :total="total" @change="pageChange" :pageSize.sync="showNum" />
+        </a-row>
+      </a-row>
+    </a-row>
+    <a-row class="image-list" :gutter="16" style="padding:0 8px">
+      <a-col :lg="6" :sm="12" class="vm-margin" v-for="(item, index) of dataShow" :key="index" style="padding:0">
+        <vm-card
+          style="margin: 0 15px;"
+          :editable="true"
+          :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>
+
+<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'
+import actorModal from './ActorModal'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+export default {
+  name: 'VmImageList',
+  components: {
+    ACol,
+    ARow,
+    VmCard,
+    actorModal
+  },
+  mixins: [JeecgListMixin],
+  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: '#'
+          }
+        ]
+      }
+    },
+    total: {
+      type: Number,
+      default() {
+        return 0
+      }
+    }
+  },
+  data: function() {
+    return {
+      keyword: '', // keyword for search
+      dataShow: [], // data for showing
+      showNum: 8, // number of item per page
+      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
+    //       }
+    //     }
+    //   })
+    // },
+    deleteOk: function(data) {
+      this.$emit('delete-ok', data)
+    },
+    search() {
+      if (this.keyword) {
+        this.$emit('getList', 1, this.keyword + '')
+      } else {
+        this.$emit('getList')
+      }
+    }
+  },
+  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>

+ 52 - 0
src/views/modules/prop/prop.vue

@@ -0,0 +1,52 @@
+<template>
+  <vm-image-list :data="dataImageList" title="道具列表"  :total="total" @delete-ok="deletefn" class="vm-margin" @getList="getActorList"
+    @updateList="getActorList(1, '')"></vm-image-list>
+</template>
+
+<script>
+  import VmImageList from './modules/vm-image-list'
+  import {
+    propList
+  } 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(page, name) {
+        this.dataImageList = []
+        propList({
+          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: [
+
+        ],
+        total: null
+      }
+    }
+  }
+</script>