|
@@ -1,4 +1,7 @@
|
|
|
<style scoped lang="scss">
|
|
|
+/deep/.vue-treeselect__control {
|
|
|
+ line-height: 36px !important;
|
|
|
+}
|
|
|
.account-item {
|
|
|
/deep/ .ant-form-item-control {
|
|
|
line-height: 1;
|
|
@@ -212,7 +215,7 @@ li.chouzhen.first:before {
|
|
|
<div class="chartBox">
|
|
|
<a-row :gutter="20">
|
|
|
<a-col :sm="24" style="margin-bottom: 20px; z-index: 10" id="container">
|
|
|
- <a-card class="search-box step-jump" title="选择账户">
|
|
|
+ <a-card class="search-box step-jump">
|
|
|
<a-form layout="horizontal" v-bind="formItemLayout" :form="formProject">
|
|
|
<a-row :gutter="16">
|
|
|
<a-col :span="16">
|
|
@@ -239,38 +242,30 @@ li.chouzhen.first:before {
|
|
|
>
|
|
|
<a-col :span="16">
|
|
|
<a-form-item label="选择项目">
|
|
|
- <a-radio-group
|
|
|
- button-style="solid"
|
|
|
+ <Treeselect
|
|
|
+ style="width:600px"
|
|
|
v-decorator="[
|
|
|
'projectId',
|
|
|
{
|
|
|
- rules: [{ required: true, message: '使用范围必选' }],
|
|
|
- initialValue: 1
|
|
|
+ rules: [{ required: true, message: '项目必选' }]
|
|
|
}
|
|
|
]"
|
|
|
- >
|
|
|
- <a-radio-button :value="1">账户</a-radio-button>
|
|
|
- <a-radio-button :value="2">项目</a-radio-button>
|
|
|
- </a-radio-group>
|
|
|
+ />
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<a-row :gutter="16" v-else>
|
|
|
<a-col :span="16">
|
|
|
<a-form-item label="选择账户">
|
|
|
- <a-radio-group
|
|
|
- button-style="solid"
|
|
|
+ <treeSelectAccount
|
|
|
+ style="width:600px"
|
|
|
v-decorator="[
|
|
|
'accountId',
|
|
|
{
|
|
|
- rules: [{ required: true, message: '使用范围必选' }],
|
|
|
- initialValue: 1
|
|
|
+ rules: [{ required: true, message: '账户必选' }]
|
|
|
}
|
|
|
]"
|
|
|
- >
|
|
|
- <a-radio-button :value="1">账户</a-radio-button>
|
|
|
- <a-radio-button :value="2">项目</a-radio-button>
|
|
|
- </a-radio-group>
|
|
|
+ />
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
@@ -296,8 +291,6 @@ li.chouzhen.first:before {
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
- {{getFormData('numberMin')}}
|
|
|
- {{getFormData('numberMax')}}
|
|
|
<a-row :gutter="16">
|
|
|
<a-col :span="16">
|
|
|
<a-form-item label="编号">
|
|
@@ -305,7 +298,13 @@ li.chouzhen.first:before {
|
|
|
v-decorator="[
|
|
|
'numberMin',
|
|
|
{
|
|
|
- rules: [{ required: true, message: '编号位数限制必填' }]
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入正确的编号',
|
|
|
+ validator: numberMinCheck
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
]"
|
|
|
:precision="0"
|
|
@@ -317,9 +316,15 @@ li.chouzhen.first:before {
|
|
|
v-decorator="[
|
|
|
'numberMax',
|
|
|
{
|
|
|
- rules: [{ required: true, message: '编号位数限制12312' }]
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '编号位数限制12312'
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
]"
|
|
|
+ @change="numberMaxCheck"
|
|
|
:precision="0"
|
|
|
:min="1"
|
|
|
:max="100"
|
|
@@ -327,12 +332,226 @@ li.chouzhen.first:before {
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="16">
|
|
|
+ <a-form-item label="渠道号">
|
|
|
+ <a-input
|
|
|
+ v-decorator="[
|
|
|
+ 'channelCode',
|
|
|
+ { rules: [{ required: true, message: '请填写渠道号' }] }
|
|
|
+ ]"
|
|
|
+ allow-clear
|
|
|
+ id="channelCode"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item v-bind="tailFormItemLayout">
|
|
|
+ <a-tag
|
|
|
+ color="#2db7f5"
|
|
|
+ @click="getChangeAll('渠道号', 'formProject', 'channelCode')"
|
|
|
+ >+渠道号</a-tag
|
|
|
+ >
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="16">
|
|
|
+ <a-form-item label="渠道号名称">
|
|
|
+ <a-input
|
|
|
+ v-decorator="[
|
|
|
+ 'channelName',
|
|
|
+ { rules: [{ required: true, message: '请填写渠道号' }] }
|
|
|
+ ]"
|
|
|
+ allow-clear
|
|
|
+ id="channelName"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item v-bind="tailFormItemLayout">
|
|
|
+ <a-tag
|
|
|
+ color="#2db7f5"
|
|
|
+ @click="getChangeAll('渠道号', 'formProject', 'channelName')"
|
|
|
+ >+渠道号</a-tag
|
|
|
+ >
|
|
|
+ <a-tag
|
|
|
+ color="#2db7f5"
|
|
|
+ @click="getChangeAll('编号', 'formProject', 'channelName')"
|
|
|
+ >+编号</a-tag
|
|
|
+ >
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="16">
|
|
|
+ <a-form-item label="下载链接">
|
|
|
+ <a-button type="primary" @click="addNewApp">添加应用</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item v-bind="tailFormItemLayout">
|
|
|
+ <span style="color:red">由于快手API限制,每天最多新建300个应用包</span>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="16">
|
|
|
+ <a-form-item label="调起链接">
|
|
|
+ <a-input
|
|
|
+ v-decorator="[
|
|
|
+ 'url',
|
|
|
+ {
|
|
|
+ rules: [{ validator: handleConfirmValueOkUndefind }]
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ allow-clear
|
|
|
+ id="url"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item v-bind="tailFormItemLayout">
|
|
|
+ <a-tag color="#2db7f5" @click="getChangeAll('渠道号', 'formProject', 'url')"
|
|
|
+ >+渠道号</a-tag
|
|
|
+ >
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="16">
|
|
|
+ <a-form-item label="第三方点击监测链接">
|
|
|
+ <a-input
|
|
|
+ v-decorator="[
|
|
|
+ 'clickTrackUrl',
|
|
|
+ {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '请填写第三方点击监测链接' },
|
|
|
+ { validator: handleConfirmValue }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ allow-clear
|
|
|
+ id="clickTrackUrl"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item v-bind="tailFormItemLayout">
|
|
|
+ <a-tag
|
|
|
+ color="#2db7f5"
|
|
|
+ @click="getChangeAll('渠道号', 'formProject', 'clickTrackUrl')"
|
|
|
+ >+渠道号</a-tag
|
|
|
+ >
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="16">
|
|
|
+ <a-form-item label="第三方actionBar监测链接">
|
|
|
+ <a-input
|
|
|
+ v-decorator="[
|
|
|
+ 'actionbarClickUrl',
|
|
|
+ {
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请填写第三方actionBar监测链接'
|
|
|
+ },
|
|
|
+ { validator: handleConfirmValue }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ allow-clear
|
|
|
+ id="actionbarClickUrl"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item v-bind="tailFormItemLayout">
|
|
|
+ <a-tag
|
|
|
+ color="#2db7f5"
|
|
|
+ @click="getChangeAll('渠道号', 'formProject', 'actionbarClickUrl')"
|
|
|
+ >+渠道号</a-tag
|
|
|
+ >
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="16">
|
|
|
+ <a-form-item label="是否关联单品">
|
|
|
+ <a-radio-group
|
|
|
+ button-style="solid"
|
|
|
+ v-decorator="[
|
|
|
+ 'isHaveItem',
|
|
|
+ {
|
|
|
+ rules: [{ required: true, message: '是否关联单品必选' }],
|
|
|
+ initialValue: 1
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <a-radio-button :value="1">是</a-radio-button>
|
|
|
+ <a-radio-button :value="0">否</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="16">
|
|
|
+ <a-form-item label="使用层级">
|
|
|
+ <a-radio-group
|
|
|
+ button-style="solid"
|
|
|
+ v-decorator="[
|
|
|
+ 'usageLevel',
|
|
|
+ {
|
|
|
+ rules: [{ required: true, message: '使用层级必选' }],
|
|
|
+ initialValue: 'account'
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <a-radio-button value="account">账户</a-radio-button>
|
|
|
+ <a-radio-button value="plan">计划</a-radio-button>
|
|
|
+ <a-radio-button value="group">组</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="16">
|
|
|
+ <a-form-item label="是否循环使用">
|
|
|
+ <a-radio-group
|
|
|
+ button-style="solid"
|
|
|
+ v-decorator="[
|
|
|
+ 'isCycle',
|
|
|
+ {
|
|
|
+ rules: [{ required: true, message: '使用层级必选' }],
|
|
|
+ initialValue: 1
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <a-radio-button :value="1">是</a-radio-button>
|
|
|
+ <a-radio-button :value="0">否</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="16">
|
|
|
+ <a-form-item label="循环使用次数">
|
|
|
+ <a-input-number
|
|
|
+ v-decorator="[
|
|
|
+ 'cycleTimes',
|
|
|
+ {
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: getFormData('isCycle') == 0 ? false : true,
|
|
|
+ message: '请输入循环使用次数'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ :precision="0"
|
|
|
+ :min="1"
|
|
|
+ :max="999"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
</a-form>
|
|
|
</a-card>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
</div>
|
|
|
</a-spin>
|
|
|
+ <creatApplication ref="application" @getDataList="getDataAll" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -342,13 +561,16 @@ li.chouzhen.first:before {
|
|
|
import Logo from '@/components/tools/Logo.vue'
|
|
|
import pick from 'lodash.pick'
|
|
|
import { mixin } from '@/utils/mixin.js'
|
|
|
-import Treeselect from './components/treeSelectAccount.vue'
|
|
|
+import Treeselect from './components/treeSelectProject.vue'
|
|
|
+import treeSelectAccount from './components/treeSelectAccount.vue'
|
|
|
+
|
|
|
import moment from 'moment'
|
|
|
import selectCheckAll from '@/components/formComponents/toutiaoTime'
|
|
|
import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
|
|
|
import uploadFile from '@/components/uploadFileMd5Push.vue'
|
|
|
import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
|
|
|
import selectTable from '@/views/modules/Statistics/components/selectPagination.vue'
|
|
|
+import creatApplication from './components/creatApplication.vue'
|
|
|
// import EditableCell from './editablCell'
|
|
|
// import lookPreviewVue from './lookPreview.vue'
|
|
|
function tqFun(qcArr1) {
|
|
@@ -403,12 +625,15 @@ export default {
|
|
|
selectCheckAll,
|
|
|
checkBoxGroup,
|
|
|
uploadFile,
|
|
|
- selectTable
|
|
|
+ selectTable,
|
|
|
+ treeSelectAccount,
|
|
|
+ creatApplication
|
|
|
// EditableCell
|
|
|
},
|
|
|
mixins: [mixin],
|
|
|
data() {
|
|
|
return {
|
|
|
+ projectId: null,
|
|
|
spinning: false,
|
|
|
accountIds: [],
|
|
|
fansStarOptions: [],
|
|
@@ -424,14 +649,14 @@ export default {
|
|
|
loading: false,
|
|
|
formProject: this.$form.createForm(this), //选择项目表单
|
|
|
formItemLayout: {
|
|
|
- labelCol: { span: 4 },
|
|
|
+ labelCol: { span: 6 },
|
|
|
wrapperCol: { span: 16 }
|
|
|
},
|
|
|
tailFormItemLayout: {
|
|
|
wrapperCol: {
|
|
|
sm: {
|
|
|
- span: 20,
|
|
|
- offset: 4
|
|
|
+ span: 18,
|
|
|
+ offset: 6
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -454,7 +679,106 @@ export default {
|
|
|
filters: {},
|
|
|
methods: {
|
|
|
moment,
|
|
|
-
|
|
|
+ getDataAll(form) {},
|
|
|
+ addNewApp() {
|
|
|
+ this.$refs.application.showApplication()
|
|
|
+ },
|
|
|
+ getChangeAll(type, form, field) {
|
|
|
+ var node = document.getElementById(field)
|
|
|
+ var v = '-{{' + type + '}}-'
|
|
|
+ if (document.selection) {
|
|
|
+ //IE
|
|
|
+ node.focus()
|
|
|
+ var sel = document.selection.createRange()
|
|
|
+ sel.text = v
|
|
|
+ sel.select()
|
|
|
+ if (field == 'channelName') {
|
|
|
+ this[form].setFieldsValue({ channelName: sel.text })
|
|
|
+ } else if (field == 'channelCode') {
|
|
|
+ this[form].setFieldsValue({ channelCode: sel.text })
|
|
|
+ } else if (field == 'url') {
|
|
|
+ this[form].setFieldsValue({ url: sel.text })
|
|
|
+ } else if (field == 'clickTrackUrl') {
|
|
|
+ this[form].setFieldsValue({ clickTrackUrl: sel.text })
|
|
|
+ } else if (field == 'actionbarClickUrl') {
|
|
|
+ this[form].setFieldsValue({ actionbarClickUrl: sel.text })
|
|
|
+ }
|
|
|
+ } else if (node.selectionStart || node.selectionStart == '0') {
|
|
|
+ //MOZILLA/GOOGLE
|
|
|
+ var startPos = node.selectionStart
|
|
|
+ var endPos = node.selectionEnd
|
|
|
+ var restoreTop = node.scrollTop
|
|
|
+ node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
|
|
|
+ if (restoreTop > 0) {
|
|
|
+ node.scrollTop = restoreTop
|
|
|
+ }
|
|
|
+ if (field == 'channelName') {
|
|
|
+ this[form].setFieldsValue({ channelName: node.value })
|
|
|
+ } else if (field == 'channelCode') {
|
|
|
+ this[form].setFieldsValue({ channelCode: node.value })
|
|
|
+ } else if (field == 'url') {
|
|
|
+ this[form].setFieldsValue({ url: sel.text })
|
|
|
+ } else if (field == 'clickTrackUrl') {
|
|
|
+ this[form].setFieldsValue({ clickTrackUrl: sel.text })
|
|
|
+ } else if (field == 'actionbarClickUrl') {
|
|
|
+ this[form].setFieldsValue({ actionbarClickUrl: sel.text })
|
|
|
+ }
|
|
|
+ node.focus()
|
|
|
+ node.selectionStart = startPos + v.length
|
|
|
+ node.selectionEnd = startPos + v.length
|
|
|
+ // this.channelName = node.value
|
|
|
+ } else {
|
|
|
+ //OTHER
|
|
|
+ node.value += v
|
|
|
+ // console.log(node.value)
|
|
|
+ if (field == 'channelName') {
|
|
|
+ this[form].setFieldsValue({ channelName: node.value })
|
|
|
+ } else if (field == 'channelCode') {
|
|
|
+ this[form].setFieldsValue({ channelCode: node.value })
|
|
|
+ } else if (field == 'url') {
|
|
|
+ this[form].setFieldsValue({ url: sel.text })
|
|
|
+ } else if (field == 'clickTrackUrl') {
|
|
|
+ this[form].setFieldsValue({ clickTrackUrl: sel.text })
|
|
|
+ } else if (field == 'actionbarClickUrl') {
|
|
|
+ this[form].setFieldsValue({ actionbarClickUrl: sel.text })
|
|
|
+ }
|
|
|
+ node.focus()
|
|
|
+ // this.channelName = node.value
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleConfirmValue(rule, value, callback) {
|
|
|
+ if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value != '') {
|
|
|
+ callback()
|
|
|
+ } else {
|
|
|
+ callback('链接不能为空且开头为http://或https://')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleConfirmValueOkUndefind(rule, value, callback) {
|
|
|
+ if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) || value == '') {
|
|
|
+ callback()
|
|
|
+ } else {
|
|
|
+ callback('链接开头为http://或https://')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ numberMinCheck(rule, value, callback) {
|
|
|
+ if (value == '' || value == null) {
|
|
|
+ callback('请输入正确的编号')
|
|
|
+ } else if (this.getFormData('numberMax') && value > this.getFormData('numberMax')) {
|
|
|
+ callback('请输入正确的编号')
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ numberMaxCheck() {
|
|
|
+ // if (value == '' || value == null) {
|
|
|
+ // callback('请输入最高出价')
|
|
|
+ // } else if (this.getFormData('numberMin') && value < this.getFormData('numberMin')) {
|
|
|
+ // callback('该编号不能比前面小')
|
|
|
+ // } else {
|
|
|
+ // callback()
|
|
|
+ // }
|
|
|
+ this.formProject.validateFields(['numberMin'])
|
|
|
+ },
|
|
|
//获取表单的某一个属性值
|
|
|
getFormData(className) {
|
|
|
return this.formProject.getFieldValue(className)
|