Browse Source

切换分支修改视频素材

朱鑫波 4 năm trước cách đây
mục cha
commit
217770092c

+ 429 - 0
src/views/modules/autoLaunch/material-all/components/selectRegion.vue

@@ -0,0 +1,429 @@
+<style scoped>
+  .transfer {
+    display: flex;
+  }
+
+  .transfer .transfer-box {
+    width: 350px;
+    height: 250px;
+    border: 1px solid #dadfe3;
+    display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    box-sizing: border-box;
+    margin-right: 25px;
+  }
+
+  .content-box {
+    min-width: 174px;
+    width: 100%;
+    height: 100%;
+    border-right: 1px solid #dadfe3;
+  }
+
+  .content-box .content-title {
+    width: 100%;
+    background: #f8f9fa;
+    border-bottom: 1px solid #dadfe3;
+    padding: 5px 15px;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 30px;
+  }
+
+  .content-box .content {
+    width: 100%;
+    height: 85%;
+    overflow: auto;
+  }
+
+  .content-box .content p:hover {
+    background: #edf1f5;
+    cursor: pointer;
+  }
+
+  .content-box .content p:hover span {
+    display: inline-block;
+  }
+
+  .content-box .content p span {
+    display: none;
+  }
+
+  p {
+    padding: 5px;
+    margin-bottom: 0;
+    border-bottom: 1px solid #f2f2f2;
+  }
+
+  .backgroundOnly {
+    background: #edf1f5;
+  }
+</style>
+<style>
+  .transfer .ant-checkbox-group {
+    width: 100px;
+    overflow-x: hidden;
+  }
+
+  .transfer .ant-checkbox-group-item {
+    display: inline-block;
+    margin-right: 8px;
+    width: 100%;
+  }
+</style>
+
+<template>
+  <div class="transfer">
+    <div class="transfer-box">
+      <div class="content-box">
+        <p class="content-title">省份</p>
+        <div class="content" style="position:relative">
+          <!-- <div style="position:absolute;top:0;left:0;width:100%;height:100%;background: rgba(0, 0, 0, 0.5)"
+            v-if="loading"></div> -->
+          <p><input type="checkbox" class="select_all" @change="checkAllBox" v-model="checkAll" /> 全选</p>
+
+          <p v-for="(item, index) of province" :key="item.value" :class="{ backgroundOnly: provinceIndex == index }">
+            <input class="checkItem" type="checkbox" :value="item.value" :id="item.value" v-model="checkMatched"
+              @change="checkOne(item, index)" />
+            <span @click="showCity(item, index)" style="color:black;display:inline-block;margin-left:5px;width:80%">{{
+              item.label
+            }}</span>
+          </p>
+        </div>
+      </div>
+      <div class="content-box" :style="{ borderRight: !showClass ? '0px' : '1px solid #dadfe3' }" v-show="showCityData">
+        <p class="content-title">城市</p>
+        <div class="content">
+          <!-- <p>
+            <input
+              type="checkbox"
+              class="select_all"
+              @change="checkAllBoxCity"
+              v-model="checkAllCity"
+            /> 全选
+          </p>-->
+          <p v-for="(item, index) of city" :key="item.id" :class="{ backgroundOnly: cityIndex == index }">
+            <input class="checkItem" type="checkbox" :value="item.value" :id="item.value" v-model="checkMatchedCity"
+              @change="checkOneCity(item, index)" />
+            {{ item.label }}
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="transfer-box" style="width:176px">
+      <div class="content-box">
+        <p class="content-title">
+          已选
+          <span style="float:right;font-weight:normal;color:blue;cursor: pointer;font-size:14px"
+            @click="clear">清空</span>
+        </p>
+        <div class="content">
+          <p v-for="(item, index) of checkData" :key="index">
+            {{ item.label }}
+            <!-- <span
+              style="float:right;font-weight:normal;color:blue;cursor: pointer;font-size:14px"
+              @click="detele(item,index)"
+            >删除</span>-->
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    JeecgListMixin
+  } from '@/mixins/JeecgListMixin'
+  import {
+    getProvince,
+    postAction
+  } from '@/api/manage'
+  import $ from 'jquery'
+  export default {
+    name: 'ByteDanceUserOrientationTemplateList',
+    components: {},
+    props: ['dataValue'],
+    data() {
+      return {
+        showClass: false,
+        showCityData: false,
+        checkData: [],
+        checkMatched: [],
+        province: [],
+        city: [],
+        area: [],
+        CityData: '/kuaishou/batch/getRegion',
+        provinceIndex: null,
+        cityIndex: null,
+        checkAll: false,
+        checkMatchedCity: [],
+        checkAllCity: false,
+        nowProvince: null,
+        loading: false
+      }
+    },
+    computed: {},
+    mounted() {
+      this.$nextTick(() => {
+        this.getData().then(() => {
+            console.log(this.dataValue)
+          if (this.dataValue.length>0&&this.dataValue[0].value) {
+            return
+          } else {
+            postAction('/kuaishou/batch/getRegionDetail', {
+              regionArr: this.dataValue
+            }).then(res => {
+              if (res.success) {
+                //   this.populationData.allForm.region = res.result
+                this.checkData = res.result
+                this.checkMatched = res.result.map(item => {
+                  return item.value
+                })
+                this.checkMatchedCity = res.result.map(item => {
+                  return item.value
+                })
+                this.$emit('update:checkData', this.checkData)
+              }
+            })
+          }
+
+          //   if (this.dataValue.length > 0) {
+
+          //   }
+        })
+
+      })
+    },
+    watch: {
+      dataValue: {
+        deep: true,
+        immediate: true, // immediate选项可以开启首次赋值监听
+        handler(n, o) {
+          if (n.length > 0 && n[0].value) {
+            // this.getData().then(() => {
+            console.log(1)
+            //   if (n.length > 0) {
+            this.$nextTick(() => {
+              this.checkData = n
+              this.checkMatched = n.map(item => {
+                return item.value
+              })
+              this.checkMatchedCity = n.map(item => {
+                return item.value
+              })
+              this.$emit('update:checkData', this.checkData)
+            })
+            //   }
+            // })
+
+          }
+
+        }
+      }
+    },
+    methods: {
+      getData() {
+        this.loading = true
+        var that = this
+        return new Promise(function (resolve, reject) {
+          getProvince(that.CityData, {
+            level: 1
+          }).then(res => {
+            if (res.code == '0') {
+              //   this.province.push(...res.result.records)
+              that.province = res.result.map(item => {
+                return {
+                  label: item.name,
+                  value: item.regionId
+                }
+              })
+              that.province = that.province.filter(item => {
+                return item.label != '台湾' && item.label != '香港' && item.label != '澳门'
+              })
+              that.loading = false
+              resolve()
+            }
+          })
+        })
+
+      },
+      showCity(item, index) {
+        this.city = []
+        this.showCityData = false
+        this.showClass = false
+        this.provinceIndex = index
+        this.cityIndex = null
+        this.nowProvince = item
+        this.checkMatchedCity = []
+        getProvince(this.CityData, {
+          parent: item.value
+        }).then(res => {
+          if (res.code == '0') {
+            this.city = res.result.map(item => {
+              return {
+                label: item.name,
+                value: item.regionId
+              }
+            })
+            if (this.checkMatched.indexOf(item.value) != -1) {
+              this.checkAllCity = true
+              this.checkMatchedCity = this.city.map(item => {
+                return item.value
+              })
+            } else {
+              this.checkMatchedCity = this.checkData.map(item => {
+                return item.value
+              })
+            }
+            //   this.city.push(...res.result.records)
+            this.showCityData = true
+          }
+        })
+      },
+      checkAllBox() {
+        this.checkMatched = []
+        this.checkData = []
+        if (this.checkAll) {
+          this.checkMatched = this.province.map(item => {
+            return item.value
+          })
+          this.checkData.push(...this.province)
+        } else {
+          this.checkMatched = []
+          this.checkData = []
+          this.checkMatchedCity = []
+        }
+        this.$emit('update:checkData', this.checkData)
+      },
+      checkOne(item, index) {
+        if (this.checkMatched.indexOf(item.value) == -1) {
+          var index1 = this.checkData.findIndex(v => v.value === item.value)
+          this.checkData.splice(index1, 1)
+          if (this.nowProvince) {
+            if (this.nowProvince.value == item.value) {
+              this.checkMatchedCity = []
+            }
+          }
+        } else {
+          this.checkData.push(item)
+          var data = []
+          getProvince(this.CityData, {
+            parent: item.value
+          }).then(res => {
+            if (res.code == '0') {
+              data = res.result.map(item => {
+                return {
+                  label: item.name,
+                  value: item.regionId
+                }
+              })
+              for (var i = 0; i < this.checkData.length; i++) {
+                for (let j = 0; j < data.length; j++) {
+                  if (this.checkData[i].value == data[j].value) {
+                    this.checkData.splice(i, 1)
+                  }
+                }
+              }
+            }
+          })
+
+          if (this.nowProvince) {
+            if (item.value == this.nowProvince.value) {
+              this.checkMatchedCity = this.city.map(item => {
+                return item.value
+              })
+            }
+          }
+        }
+        if (this.checkMatched.length == this.province.length) {
+          this.checkAll = true
+        } else {
+          this.checkAll = false
+        }
+        this.$emit('update:checkData', this.checkData)
+      },
+      checkAllBoxCity() {
+        this.checkMatchedCity = []
+        if (this.checkAllCity) {
+          this.checkMatchedCity = this.city.map(item => {
+            return item.value
+          })
+          this.checkMatched.push(this.nowProvince.value)
+          this.checkData.push(this.nowProvince)
+        } else {
+          this.checkMatchedCity = []
+          var index = this.checkData.findIndex(v => v.value === this.nowProvince.value)
+          var index1 = this.checkMatched.findIndex(v => v === this.nowProvince.value)
+          this.checkData.splice(index, 1)
+          this.checkMatched.splice(index1, 1)
+        }
+        this.$emit('update:checkData', this.checkData)
+      },
+      checkOneCity(item, index) {
+        var allCity = this.checkMatchedCity.filter(v => {
+          return v.toString().slice(0, 2) == this.nowProvince.value
+        })
+
+        if (allCity.length == this.city.length) {
+          this.checkMatched.push(this.nowProvince.value)
+          this.checkData.push(this.nowProvince)
+          for (var i = 0; i < allCity.length; i++) {
+            for (var j = 0; j < this.checkData.length; j++) {
+              if (allCity[i] == this.checkData[j].value) {
+                this.checkData.splice(j, 1)
+                j--
+              }
+            }
+          }
+        }
+        if (this.checkMatchedCity.indexOf(item.value) != -1) {
+          if (allCity.length != this.city.length) {
+            this.checkData.push(item)
+          }
+          if (this.checkMatched.length == this.province.length) {
+            this.checkAll = true
+          } else {
+            this.checkAll = false
+          }
+        } else {
+          if (this.checkMatched.indexOf(this.nowProvince.value) != -1) {
+            var index1 = this.checkData.findIndex(v => v.value === this.nowProvince.value)
+            var index2 = this.checkMatched.findIndex(v => v === this.nowProvince.value)
+            this.checkData.splice(index1, 1)
+            this.checkMatched.splice(index2, 1)
+            this.checkAll = false
+            var data = this.city.filter(v => {
+              return v.value != item.value
+            })
+            this.checkData.push(...data)
+          } else {
+            var index1 = this.checkData.findIndex(v => v.value === item.value)
+            this.checkData.splice(index1, 1)
+          }
+        }
+        this.$emit('update:checkData', this.checkData)
+      },
+      clear() {
+        this.checkData = []
+        this.checkMatched = []
+        this.checkMatchedCity = []
+        this.checkAll = false
+        this.$emit('update:checkData', this.checkData)
+      },
+      detele(item, index) {
+        //   if (this.checkMatched.indexOf(this.nowProvince.value) != -1) {
+        var index1 = this.checkMatched.findIndex(v => v === item.value)
+        var index2 = this.checkData.findIndex(v => v.value === item.value)
+        this.checkData.splice(index2, 1)
+        this.checkMatched.splice(index1, 1)
+        this.checkAll = false
+        //   } else {
+        //   }
+
+        this.$emit('update:checkData', this.checkData)
+      }
+    }
+  }
+</script>

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 1414 - 0
src/views/modules/autoLaunch/material-all/components/targetedPopulation.vue


+ 291 - 0
src/views/modules/autoLaunch/material-all/components/templateModal.vue

@@ -0,0 +1,291 @@
+<style>
+#table_time_selected1 tr {
+  border: 1px solid rgb(102, 162, 243);
+}
+
+.plug-timer-grid th {
+  line-height: 25px;
+}
+
+.group-creat .ant-form-item-required::before {
+  display: inline-block;
+  margin-right: 4px;
+  color: #f5222d;
+  font-size: 14px;
+  font-family: SimSun, sans-serif;
+  line-height: 1;
+  content: '';
+}
+
+.else-label .ant-form-item-label label::after {
+  content: '';
+  position: relative;
+  top: -0.5px;
+  margin: 0 8px 0 2px;
+}
+.ant-form-item-required::before {
+  display: inline-block;
+  margin-right: 4px;
+  color: #f5222d;
+  font-size: 14px;
+  font-family: SimSun, sans-serif;
+  line-height: 1;
+  content: '*';
+}
+</style>
+<style lang="scss" scoped>
+.require-check {
+  /deep/ .ant-form-item-label {
+    label::before {
+      display: inline-block;
+      margin-right: 4px;
+      color: #f5222d;
+      font-size: 14px;
+      font-family: SimSun, sans-serif;
+      line-height: 1;
+      content: '*';
+    }
+  }
+}
+</style>
+<template>
+  <a-modal v-model="visible" :title="type === 'add' ? '新建定向包' : '修改定向包'" :width="1100" v-if="visible">
+    <a-spin :spinning="spinning">
+      <a-form @submit="handleSubmit" :form="form">
+        <a-row :gutter="24">
+          <a-col :md="24" :sm="24" :xxl="24">
+            <selectTable
+              :projectId.sync="projectId"
+              :labelCol="labelCol"
+              :disabled="disabled"
+              :requireCheck="true"
+              v-if="!disabled"
+            ></selectTable>
+            <a-form-item
+              v-else
+              label="项目名称"
+              :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+              :wrapperCol="{ lg: { span: 12 }, sm: { span: 12 } }"
+              class="require-check"
+            >
+              <a-input v-model="projectName" :disabled="disabled"></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-form-item
+          label="定向包名称"
+          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+          :wrapperCol="{ lg: { span: 12 }, sm: { span: 12 } }"
+        >
+          <a-input
+            v-decorator="['templateName', { rules: [{ required: true, message: '模板名称必填' }] }]"
+            :disabled="type == 'look'"
+          ></a-input>
+        </a-form-item>
+
+        <targeted-population ref="population" :populationData.sync="populationData" />
+      </a-form>
+    </a-spin>
+    <template slot="footer">
+      <!-- <a-button type="primary" @click="handleSubmit" :loading="loading"> 确定 </a-button> -->
+      <a-button
+        type="default"
+        @click="
+          () => {
+            this.visible = false
+          }
+        "
+      >
+        取消
+      </a-button>
+      <a-button type="primary" @click="handleSubmit" :loading="loading">
+        {{ type == 'add' ? '确定' : '修改' }}
+      </a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script>
+import { getAction, postAction, deleteAction, putAction } from '@/api/manage'
+import moment from 'moment'
+import { mapGetters } from 'vuex'
+import jq from 'jquery'
+import selectTable from '@/views/modules/Statistics/components/selectPagination.vue'
+import targetedPopulation from './targetedPopulation.vue'
+import pick from 'lodash.pick'
+export default {
+  name: 'new-mould',
+  components: {
+    targetedPopulation,
+    selectTable,
+  },
+  data() {
+    return {
+      visible: false,
+      spinning: false,
+      projectName: '',
+      form: this.$form.createForm(this),
+      projectId: '',
+      populationData: {},
+      accountId: '',
+      templateId: undefined,
+      type: 'add',
+      loading: false,
+      labelCol: { lg: { span: 7 }, sm: { span: 7 } },
+      disabled: false,
+    }
+  },
+  computed: {},
+  methods: {
+    create(accountId, type) {
+      this.disabled = false
+      this.spinning = false
+      this.visible = true
+      this.type = type
+      this.populationData = {}
+      this.accountId = accountId
+    },
+    handleOk(item, type) {
+      this.spinning = true
+      this.visible = true
+      this.type = type
+      var params = {}
+      params.id = item.id
+      this.templateId = item.id
+      this.projectName = item.projectName
+      this.projectId = item.projectId
+      getAction('/kuaishouDirectionalPackage/queryById', params).then((res) => {
+        if (res.success) {
+          var dataJson = {
+            ...res.result,
+          }
+
+          this.populationData = dataJson
+
+          this.populationData.devicePrice = dataJson.devicePrice ? JSON.parse(dataJson.devicePrice) : null
+          this.populationData.appInterest = dataJson.appInterest ? JSON.parse(dataJson.appInterest) : null
+          this.populationData.businessInterest = dataJson.businessInterest
+            ? JSON.parse(dataJson.businessInterest)
+            : null
+          this.populationData.fansStar = dataJson.fansStar ? JSON.parse(dataJson.fansStar) : null
+          this.populationData.interestVideo = dataJson.interestVideo ? JSON.parse(dataJson.interestVideo) : null
+          this.populationData.deviceBrand = dataJson.deviceBrand ? JSON.parse(dataJson.deviceBrand) : null
+
+          this.populationData.age = dataJson.min ? [dataJson.min, dataJson.max] : []
+          this.populationData.agesRange = dataJson.agesRange ? JSON.parse(dataJson.agesRange) : []
+          this.populationData.devicePrice = dataJson.devicePrice ? dataJson.devicePrice : null
+
+          this.populationData.behavior = dataJson.label
+          this.populationData.interest = dataJson.interestLabel
+
+          this.populationData.sceneType = dataJson.sceneType ? JSON.parse(dataJson.sceneType) : []
+          this.populationData.allForm = {}
+          this.populationData.allForm.regionType =
+            dataJson.region && JSON.parse(dataJson.region).length > 0 ? 'limit' : 'noLimit'
+
+          this.populationData.allForm.region = dataJson.region
+          // postAction('/kuaishou/batch/getRegionDetail', {
+          //   regionArr: dataJson.region
+          // }).then(res => {
+          //   console.log(res, 11111)
+          //   if (res.success) {
+          //     this.populationData.allForm.region = res.result
+          //   }
+          // })
+
+          this.populationData.allForm.ageType =
+            dataJson.agesRange.length > 0 ? 'ageLimit' : dataJson.min>0 ? 'ageCustom' : 'noLimit'
+          this.populationData.allForm.device = dataJson.deviceBrand && eval(dataJson.deviceBrand).length > 0 ? '1' : '0'
+          this.populationData.allForm.price = dataJson.devicePrice && eval(dataJson.devicePrice).length > 0 ? '1' : '0'
+          this.populationData.allForm.appType =
+            dataJson.appInterest && eval(dataJson.appInterest).length > 0
+              ? '1'
+              : dataJson.appIds && eval(dataJson.appIds).length > 0
+              ? '2'
+              : '0'
+          this.populationData.allForm.fansStar =
+            dataJson.fansStar && eval(dataJson.fansStar).length > 0 ? '1' : '0'
+          this.populationData.allForm.interestVideo =
+            dataJson.interestVideo && eval(dataJson.interestVideo).length > 0 ? '1' : '0'
+          this.populationData.allForm.platform_os = dataJson.platformOs
+          this.populationData.allForm.businessInterestType = dataJson.businessInterestType
+          this.populationData.allForm.isOpen = dataJson.isOpen
+          this.populationData.allForm.noAgeBreak = dataJson.noAgeBreak + ''
+          this.populationData.allForm.noGenderBreak = dataJson.noGenderBreak + ''
+          this.populationData.allForm.noAreaBreak = dataJson.noAreaBreak + ''
+          this.populationData.allForm.behaviorInterest = dataJson.label ? '1' : '0'
+          this.populationData.allForm.checkArr =
+            this.populationData.allForm.appType == '2' ? JSON.parse(dataJson.appIds) : []
+          this.populationData.projectId = dataJson.projectId + ''
+
+          this.disabled = true
+
+          this.$nextTick(() => {
+            console.log(dataJson)
+            this.form.setFieldsValue(pick(dataJson, ['templateName']))
+            this.spinning = false
+          })
+        }
+      })
+    },
+    handleCancel(e) {
+      this.visible = false
+    },
+    handleSubmit(e) {
+      //   this.$refs.population.handleSubmit()
+
+      e.preventDefault()
+      this.$refs.population.handleSubmit()
+      this.$refs.population.formAll.validateFields((err, value) => {
+        if (this.populationData.allForm.appType == '2') {
+          if (this.populationData.appIds.length == 0) {
+            this.$message.error('APP名称未选择')
+          }
+        }
+        if (!err) {
+          this.form.validateFieldsAndScroll((err, values) => {
+            if (!err) {
+              // this.loading = true
+              if (this.projectId) {
+                var params = {
+                  ...this.populationData,
+                  templateName: values.templateName,
+                  projectId: this.projectId,
+                }
+                params.label = JSON.stringify(params.behavior)
+                params.interestLabel = JSON.stringify(params.interest)
+                if (this.type == 'add') {
+                  postAction('/kuaishouDirectionalPackage/createDirectionalPackage', params).then((res) => {
+                    if (res.success) {
+                      this.visible = false
+                      this.loading = false
+                      this.$emit('getData')
+                    } else {
+                      this.loading = false
+                      this.$message.error(res.message)
+                    }
+                  })
+                } else if (this.type == 'edit') {
+                  params.id = this.templateId
+                  postAction('/kuaishouDirectionalPackage/updateDirectionalPackage', params).then((res) => {
+                    this.visible = false
+                    if (res.success) {
+                      this.loading = false
+                      this.$emit('getData')
+                    } else {
+                      this.loading = false
+                      this.$message.error(res.message)
+                    }
+                  })
+                }
+              } else {
+                this.$message.error('请选择项目')
+              }
+            }
+          })
+        }
+      })
+    },
+  },
+}
+</script>

+ 279 - 84
src/views/modules/autoLaunch/material-all/material-detail.vue

@@ -2,6 +2,34 @@
 #office-iframe {
     height: 800px;
 }
+.directional-border {
+    border: 1px solid #f2f2f2;
+    min-height: 300px;
+    width: 100%;
+    padding: 20px;
+    /deep/.title-border {
+        width: calc(100% + 40px);
+        height:50px;
+        line-height:50px;
+        background:rgb(250,250,250);
+        display: flex;
+        align-items: center;
+        margin-left: -20px;
+        margin-top: -20px;
+        padding: 20px;
+    }
+}
+.flex-main {
+    display: flex;
+    p {
+        color: black;
+        font-weight: 600;
+        overflow:hidden; //超出的文本隐藏
+        text-overflow:ellipsis; //溢出用省略号显示
+        white-space:nowrap; //溢出不换行
+    }
+}
+
 </style>
 <style>
 .info-detail .ant-descriptions-item-content {
@@ -23,6 +51,7 @@
     width: 85px;
     color: slategrey;
     font-weight: 500;
+    
 }
 </style>
 <template>
@@ -79,7 +108,7 @@
                     </a-descriptions>
                 </a-card>
                 <a-card style="min-height: 300px; margin: 10px 0" class="info-detail">
-                     <a-descriptions title="素材排期和定向">
+                    <a-descriptions title="素材排期">
                         <a-descriptions-item  :span="3">
                             <span slot="label">
                                 <a-tooltip title="当前素材仅可在设置日期内进行投放,其他时段不会投放此素材">
@@ -87,44 +116,144 @@
                                 </a-tooltip>
                                 可用日期
                             </span>
-                            <a @click="selectTime">请选择</a>
-                        </a-descriptions-item>
-                        <a-descriptions-item label="素材唯一编码">
-                        {{ materialInfo.signature ? materialInfo.signature : '-' }}
-                        </a-descriptions-item>
-                        <a-descriptions-item label="素材状态">
-                        {{ materialInfo.status == 0 ? '可用' : '删除' }}
-                        </a-descriptions-item>
-                        <a-descriptions-item label="素材渠道">
-                        {{
-                            materialInfo.channelType == 0 ? '内部' : '素造'
-                        }}
-                        </a-descriptions-item>
-                        <a-descriptions-item label="上传时间">
-                        <span v-if="materialInfo.createTime">
-                            {{ materialInfo.createTime }}
-                        </span>
-                        <span v-else>-</span>
-                        </a-descriptions-item>
-                        <a-descriptions-item label="同步时间">
-                        {{ materialInfo.statDate ? materialInfo.statDate : '-' }}
-                        </a-descriptions-item>
-                        <a-descriptions-item label="编导">
-                        {{ materialInfo.planName ? (materialInfo.planName == '' ? '无' : materialInfo.planName) : '-' }}
-                        </a-descriptions-item>
-                        <a-descriptions-item label="拍摄">
-                        {{ materialInfo.shotName ? (materialInfo.shotName == '' ? '无' : materialInfo.shotName) : '-' }}
-                        </a-descriptions-item>
-                        <a-descriptions-item label="剪辑">
-                        {{ materialInfo.clipName ? (materialInfo.clipName == '' ? '无' : materialInfo.clipName) : '-' }}
+                            <span  v-if="materialInfo&&materialInfo.putStartTime===''">
+                                不限
+                                <a @click="selectTime(null)">请选择</a>
+                            </span>
+                            <span  v-else-if="materialInfo&&materialInfo.putStartTime!==''">
+                                {{materialInfo.putStartTime+'~'+materialInfo.putEndTime}}
+                                <a @click="selectTime(materialInfo)">修改</a>
+                            </span>
+                            
                         </a-descriptions-item>
                     </a-descriptions>
+                    <div
+                        style="
+                        margin-bottom: 20px;
+                        color: rgba(0, 0, 0, 0.85);
+                        font-weight: bold;
+                        font-size: 16px;
+                        line-height: 1.5;
+                        "
+                    >
+                        素材定向
+                    </div>
+
+                    <div class="directional-border">
+                        <a-row class="title-border">
+                            <a-col :span="24" class="flex-main" style="justify-content: space-between;">
+                                <div>
+                                    <span class="ant-descriptions-item-label" style="color:black;font-weight:500"> 素材可用定向</span>
+                                    <a-radio-group name="radioGroup" v-model="useDirectional">
+                                        <a-radio value="noUse">
+                                        不使用定向包
+                                        </a-radio>
+                                        <a-radio value="use">
+                                        使用定向包
+                                        </a-radio>
+                                    </a-radio-group>
+                                </div>
+                                <a>{{ useDirectional==='noUse' ? '编辑' : '选择'}}</a>
+                            </a-col>
+                        </a-row>
+                         <a-row>
+                            <a-col :xl="12" :md="24" class="flex-main">
+                                <span class="ant-descriptions-item-label"> 地区:</span>
+                                <p title="-">-</p>
+                            </a-col>
+                            <a-col :xl="12" :md="24" class="flex-main">
+                                <span class="ant-descriptions-item-label"> 年龄:</span>
+                                <p title="-">-</p>
+                            </a-col>
+                        </a-row>
+                         <a-row>
+                            <a-col :xl="12" :md="24" class="flex-main">
+                                <span class="ant-descriptions-item-label"> 性别:</span>
+                                <p title="-">-</p>
+                            </a-col>
+                            <a-col :xl="12" :md="24" class="flex-main">
+                                <span class="ant-descriptions-item-label"> 最低版本:</span>
+                                <p title="-">-</p>
+                            </a-col>
+                        </a-row>
+                         <a-row>
+                            <a-col :xl="12" :md="24" class="flex-main">
+                                <span class="ant-descriptions-item-label"> 设备品牌:</span>
+                                <p title="-">-</p>
+                            </a-col>
+                            <a-col :xl="12" :md="24" class="flex-main">
+                                <span class="ant-descriptions-item-label"> 设备价格:</span>
+                                <p title="-">-</p>
+                            </a-col>
+                        </a-row>
+                         <a-row>
+                            <a-col :xl="12" :md="24" class="flex-main">
+                                <span class="ant-descriptions-item-label"> APP行为:</span>
+                                <p title="-">-</p>
+                            </a-col>
+                            <a-col :xl="12" :md="24" class="flex-main">
+                                <span class="ant-descriptions-item-label"> 商业兴趣:</span>
+                                <p title="-">-</p>
+                            </a-col>
+                        </a-row>
+                         <a-row>
+                            <a-col :xl="12" :md="24" class="flex-main">
+                                <span class="ant-descriptions-item-label"> 网络环境:</span>
+                                <p title="-">-</p>
+                            </a-col>
+                            <a-col :xl="12" :md="24" class="flex-main">
+                                <span class="ant-descriptions-item-label"> 网红类别:</span>
+                                <p title="-">-</p>
+                            </a-col>
+                        </a-row>
+                         <a-row>
+                            <a-col :xl="12" :md="24" class="flex-main">
+                                <span class="ant-descriptions-item-label"> 兴趣视频用户:</span>
+                                <p title="-">-</p>
+                            </a-col>
+                            <a-col :xl="12" :md="24" class="flex-main">
+                                <span class="ant-descriptions-item-label"> 过滤已转换用户:</span>
+                                <p title="-">-</p>
+                            </a-col>
+                        </a-row>
+                         <a-row>
+                            <a-col :xl="12" :md="24" class="flex-main">
+                                <span class="ant-descriptions-item-label"> 智能扩量:</span>
+                                <p title="-">-</p>
+                            </a-col>
+                        </a-row>
+                    </div>
                 </a-card>
                 <a-card style="min-height: 300px; margin: 10px 0">
                     
                 </a-card>
             </a-col>
         </a-spin>
+        <a-modal 
+        title="素材可用日期" 
+        v-model="timeVisible" 
+        :width="400" 
+        @ok="handleOk"
+        @cancel="timeVisible=false"
+        :confirmLoading="editTimeLoading"
+        >
+            <a-form layout="inline">
+                <a-form-item label="选择日期">
+                    <a-radio-group v-model="timeSelsetData" button-style="solid">
+                        <a-radio-button value="a">
+                            不限
+                        </a-radio-button>
+                        <a-radio-button value="b">
+                            指定日期
+                        </a-radio-button>
+                    </a-radio-group>
+                    
+                   
+                </a-form-item>
+                 <a-range-picker style="margin-top:15px" v-if="timeSelsetData === 'b'" format="YYYY-MM-DD" :disabled-date="disabledDate" v-model="dateRange">
+                    </a-range-picker>
+            </a-form>
+        </a-modal>
     </a-row>
 </template>
 
@@ -138,66 +267,132 @@ import uploadFile from '@/components/uploadFile.vue'
 import { mapActions, mapGetters, mapState } from 'vuex'
 var echarts = require('echarts')
 export default {
-  name: 'online-training-list',
-  data() {
-    return {
-      noImg: require('@/assets/noImg.png'),
-      materialInfo: null,
-      dataView: null,
-      clientWidth: 1920,
-      spinning: false,
-      scrollTopAll: 0,
-      scrollTop: 124,
-      mediaId: 0,
-      url: JSON.parse(localStorage.getItem('materialDetail')).url
-    }
-  },
-  components: {
-    UploadToAli,
-    uploadFile,
-  },
-  watch: {
-  },
-  methods: {
-    getMaterialInfo() {
-        var data = JSON.parse(localStorage.getItem('materialDetail'))
-        this.spinning = true
-        var params = {
-            signature: data.md5,
+    name: 'online-training-list',
+    data() {
+        return {
+            noImg: require('@/assets/noImg.png'),
+            materialInfo: null,
+            dataView: null,
+            clientWidth: 1920,
+            spinning: false,
+            scrollTopAll: 0,
+            scrollTop: 124,
+            mediaId: 0,
+            url: JSON.parse(localStorage.getItem('materialDetail')).url,
+            timeVisible: false,
+            timeSelsetData: 'a',
+            dateRange: [],
+            editTimeLoading: false,
+            useDirectional: 'noUse',
+            directionalInfo: null
         }
-        this.getAction('/kuaishouProjectVideoGet/getVideoDetails', params).then((res) => {
-            if (res.success) {
-                if (res.result) {
-                    this.materialInfo = res.result;
-                    this.spinning = false;
+    },
+    components: {
+        UploadToAli,
+        uploadFile,
+    },
+    watch: {
+    },
+    methods: {
+        disabledDate(current) {
+            // Can not select days before today and today
+            return current && current < moment().subtract(1, 'days')
+        },
+        getMaterialInfo() {
+            var data = JSON.parse(localStorage.getItem('materialDetail'))
+            this.spinning = true
+            var params = {
+                signature: data.md5,
+                id: data.id
+            }
+            this.getAction('/kuaishouProjectVideoGet/getVideoDetails', params).then((res) => {
+                if (res.success) {
+                    if (res.result) {
+                        this.materialInfo = res.result;
+                        this.spinning = false;
+                    } 
+                    else {
+                        this.$message.error(res.message);
+                    }
+                }
+            })
+        },
+        getDirectionalInfo() {
+            var data = JSON.parse(localStorage.getItem('materialDetail'))
+            var params = {
+                photoId: data.photoId,
+                id: data.id
+            }
+            this.getAction('/kuaishouVideoDirectionalPackage/queryDirctional', params).then((res) => {
+                if (res.success) {
+                    this.directionalInfo = res.result;
+                }
+                 else {
+                    this.$message.error(res.message);
+                }
+            })
+        },
+        handleScroll() {
+            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+            this.scrollTop = scrollTop
+        },
+        selectTime(item) {
+            if(item) {
+                if(item.putStartTime!='') {
+                    this.timeSelsetData = 'b';
+                    this.dateRange = [moment(item.putStartTime), moment(item.putEndTime)];
                 } 
                 else {
-                // this.$error({
-                //   title: '页面数据加载出错',
-                //   content: '该视频未上传公司素材库,请重新上传之后,可展示视频信息',
-                // })
+                    this.timeSelsetData = 'a';
+                    this.dateRange = [];
                 }
             }
-        })
-    },
-    handleScroll() {
-        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
-        this.scrollTop = scrollTop
+            else {
+                this.timeSelsetData = 'a';
+                this.dateRange = [];
+            } 
+            this.timeVisible = true;
+            
+        },
+        handleOk() {
+            let data = JSON.parse(localStorage.getItem('materialDetail'))
+            this.editTimeLoading = true;
+            let params = {};
+            params.id = data.id
+            if(this.timeSelsetData === 'a') {
+                params.putStartTime = '';
+                params.putEndTime = '';
+            }
+            else {
+                params.putStartTime = moment(this.dateRange[0]).format('YYYY-MM-DD');
+                params.putEndTime = moment(this.dateRange[1]).format('YYYY-MM-DD');;
+            }
+            this.postDataAction('/kuaishouProjectVideoGet/edit', params).then(res => {
+                if(res.success) {
+                    this.editTimeLoading = false;
+                    this.$message.success('修改成功');
+                    this.timeVisible = false;
+                    this.getMaterialInfo();
+                }
+                else {
+                    this.editTimeLoading = false;
+                    this.$message.error(res.message);
+                }
+            })
+        }
     },
-    selectTime() {
+    mounted() {
+        this.$nextTick(() => {
+            //   this.mediaId = JSON.parse(localStorage.getItem('videoInfo')).mediaId
+            window.addEventListener('scroll', this.handleScroll)
+            this.clientWidth = document.documentElement.clientWidth - 224
+            //   this.$route.query.mediaId
+            //   this.$route.query.md5
+            this.getMaterialInfo()
+            this.getDirectionalInfo()
 
+        })
     },
-  },
-  mounted() {
-    this.$nextTick(() => {
-    //   this.mediaId = JSON.parse(localStorage.getItem('videoInfo')).mediaId
-      window.addEventListener('scroll', this.handleScroll)
-      this.clientWidth = document.documentElement.clientWidth - 224
-      //   this.$route.query.mediaId
-      //   this.$route.query.md5
-      this.getMaterialInfo()
-    })
-  },
-  created() {},
+    created() {},
 }
 </script>

+ 13 - 2
src/views/modules/autoLaunch/material-all/material.vue

@@ -209,12 +209,23 @@ export default {
     },
     methods: {
         lowerMaterial(item) {
-
+            let params = {};
+            params.projectId = item.projectId;
+            params.photoIds = [item.photoId];
+            this.postDataAction('/kuaishouProjectVideoGet/offShelfVideos', params).then(res => {
+                if(res.success) {
+                    this.$message.success('下架成功')
+                    this.handleGetTableList({})
+                }
+                else {
+                    this.$message.error(res.message)
+                }
+            })
         },
         lookView(item) {
             // this.visibleVideo = true
             // this.videoUrlShow = item.url
-            var params = { md5: item.signature, url:item.url }
+            var params = { md5: item.signature, url:item.url, id:item.id, photoId:item.photoId }
             localStorage.setItem('materialDetail', JSON.stringify(params))
             this.$router.push({
                 path: '/autoLaunch/material-all/material-detail',

+ 2 - 2
vue.config.js

@@ -69,7 +69,7 @@ module.exports = {
     proxy: {
       '/jeecg-boot': {
           // target: 'http://192.168.1.8:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
-          target: 'http://192.168.1.3:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
+          // target: 'http://192.168.1.3:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
         // target: 'http://192.168.0.59:8088', //请求本地 需要jeecg-boot后台项目  英豪
         // target: 'http://192.168.1.62:8088', //请求本地 需要jeecg-boot后台项目  英豪
         // target: 'http://192.168.6.162:9806', //请求本地 需要jeecg-boot后台项目  祚云
@@ -77,7 +77,7 @@ module.exports = {
         // target: 'http://192.168.1.43:8088', //请求本地 需要jeecg-boot后台项目  毕洁泉
         // target: 'http://192.168.1.43:8806', //请求本地 需要jeecg-boot后台项目  毕洁泉
         // target: 'http://192.168.0.252:8098', //请求本地 需要jeecg-boot后台项目  毕洁泉
-        // target: 'http://192.168.1.219:8081', //请求本地 需要jeecg-boot后台项目  赵西安
+        target: 'http://192.168.1.219:8081', //请求本地 需要jeecg-boot后台项目  赵西安
         // target: 'http://192.168.1.193:8080', //请求本地 需要jeecg-boot后台项目  李煜一
         // target: 'http://192.168.1.193:31012', //请求本地 需要jeecg-boot后台项目  李煜一
         //  target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目