InternalModel.vue 39 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208
  1. <template>
  2. <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
  3. <a-form @submit="handleSubmit" :form="form">
  4. <a-form-item
  5. label="选择头条账户"
  6. :labelCol="labelCol"
  7. :wrapperCol="wrapperCol">
  8. <a-select
  9. v-model="accountId"
  10. showSearch
  11. placeholder="选择头条账户"
  12. optionFilterProp="children"
  13. style="width: 200px"
  14. >
  15. <a-select-option v-for="user in userList" :key="user.id" :value="user.id">{{user.accountName}}</a-select-option>
  16. </a-select>
  17. </a-form-item>
  18. <a-form-item
  19. label="模板名称"
  20. :labelCol="labelCol"
  21. :wrapperCol="wrapperCol">
  22. <a-input v-model="templateName" placeholder="请输入模板名称">
  23. </a-input>
  24. </a-form-item>
  25. <a-form-item
  26. label="投放范围"
  27. :labelCol="labelCol"
  28. :wrapperCol="wrapperCol">
  29. <a-radio-group v-model="deliveryRange" @change="onChangedeliveRange">
  30. <a-radio-button value="1">默认</a-radio-button>
  31. <a-radio-button value="2">穿山甲</a-radio-button>
  32. </a-radio-group>
  33. </a-form-item>
  34. <a-form-item
  35. label="投放形式"
  36. v-if="deliveryRangeShow"
  37. :labelCol="labelCol"
  38. :wrapperCol="wrapperCol">
  39. <a-radio-group v-model="deliveryForm">
  40. <a-radio-button value="1">激励视频</a-radio-button>
  41. <a-radio-button value="2">原生</a-radio-button>
  42. </a-radio-group>
  43. </a-form-item>
  44. <!--<a-form-item
  45. label="广告类别"
  46. :labelCol="labelCol"
  47. :wrapperCol="wrapperCol">
  48. <a-radio-group v-model="adCategory">
  49. <a-radio-button value="1">售卖</a-radio-button>
  50. <a-radio-button value="2">换量</a-radio-button>
  51. <a-radio-button value="4">配送</a-radio-button>
  52. <a-radio-button value="5">内广</a-radio-button>
  53. <a-radio-button value="7">补量</a-radio-button>
  54. </a-radio-group>
  55. </a-form-item>-->
  56. <a-form-item
  57. label="投放目标"
  58. :labelCol="labelCol"
  59. :wrapperCol="wrapperCol">
  60. <a-radio-group v-model="deliveryTarget" @change="onChangeDeliveryTarget">
  61. <a-radio-button value="11">转化量</a-radio-button>
  62. <a-radio-button value="2">点击量</a-radio-button>
  63. <a-radio-button value="1">展示量</a-radio-button>
  64. </a-radio-group>
  65. </a-form-item>
  66. <a-form-item
  67. label="下载方式"
  68. :labelCol="labelCol"
  69. :wrapperCol="wrapperCol">
  70. <a-radio-group @change="onChangeDownloadType" v-model="downloadType">
  71. <a-radio-button value="1">下载链接</a-radio-button>
  72. <a-radio-button value="2">落地页</a-radio-button>
  73. </a-radio-group>
  74. </a-form-item>
  75. <a-form-item
  76. v-if="showDownloadMode"
  77. label="下载类型"
  78. :labelCol="labelCol"
  79. :wrapperCol="wrapperCol">
  80. <a-radio-group @change="onChangeDownloadMode" v-model="downloadMode">
  81. <a-radio-button value="android">安卓下载</a-radio-button>
  82. <a-radio-button value="IOS">IOS下载</a-radio-button>
  83. </a-radio-group>
  84. </a-form-item>
  85. <a-form-item
  86. label="下载链接"
  87. :labelCol="labelCol"
  88. :wrapperCol="wrapperCol">
  89. <a-select
  90. v-model="urlId"
  91. style="width: 300px">
  92. <a-select-option v-for="url in urlList" :key="url.id" :value="url.id">{{url.name}}</a-select-option>
  93. </a-select>
  94. </a-form-item>
  95. <a-form-item
  96. v-if="showConvertTarget"
  97. label="选择转化跟踪方式"
  98. :labelCol="labelCol"
  99. :wrapperCol="wrapperCol">
  100. <a-select
  101. v-model="convertType"
  102. showSearch
  103. placeholder="选择投放目标模板"
  104. optionFilterProp="children"
  105. style="width: 200px"
  106. @change="changeConvertType"
  107. >
  108. <a-select-option v-if="showSimple"value="SIMPLE">普通应用下载</a-select-option>
  109. <!--<a-select-option value="API">应用下载API</a-select-option>-->
  110. </a-select>
  111. </a-form-item>
  112. <a-form-item
  113. v-if="showConvertTarget&&showConvertTargetSimple"
  114. label="选择转化目标"
  115. :labelCol="labelCol"
  116. :wrapperCol="wrapperCol">
  117. <a-select
  118. v-model="simpleDeliverytarget"
  119. showSearch
  120. placeholder="选择转化目标"
  121. optionFilterProp="children"
  122. style="width: 200px"
  123. >
  124. <a-select-option value="AD_CONVERT_TYPE_INSTALL_FINISH">安装完成</a-select-option>
  125. <a-select-option value="AD_CONVERT_TYPE_DOWNLOAD_FINiSH">下载完成</a-select-option>
  126. </a-select>
  127. </a-form-item>
  128. <a-form-item
  129. v-if="showConvertTarget&&showConvertTargetApi"
  130. label="选择转化目标"
  131. :labelCol="labelCol"
  132. :wrapperCol="wrapperCol">
  133. <a-select
  134. v-model="convertId"
  135. showSearch
  136. placeholder="选择转化目标"
  137. optionFilterProp="children"
  138. style="width: 800px"
  139. >
  140. <a-select-option v-for="activeConvert in activeConvertList" :key="activeConvert.id" :value="activeConvert.id">{{activeConvert.name}}</a-select-option>
  141. </a-select>
  142. </a-form-item>
  143. <!--<a-form-item
  144. label="直达链接"
  145. v-if="showOpenUrlStatus"
  146. :labelCol="labelCol"
  147. :wrapperCol="wrapperCol">
  148. <a-radio-group>
  149. <a-radio-button value="disabled">不启用</a-radio-button>
  150. <a-radio-button value="enabled">启用</a-radio-button>
  151. </a-radio-group>
  152. </a-form-item>-->
  153. <!-- <a-form-item-->
  154. <!-- label="直达链接生成方式"-->
  155. <!-- :labelCol="labelCol"-->
  156. <!-- :wrapperCol="wrapperCol">-->
  157. <!-- <a-radio-group>-->
  158. <!-- <a-radio-button value="auto_create" disabled>自动生成</a-radio-button>-->
  159. <!-- <a-radio-button value="hand_create">手动生成</a-radio-button>-->
  160. <!-- </a-radio-group>-->
  161. <!-- </a-form-item>-->
  162. <!-- <a-form-item-->
  163. <!-- label="跳转app链接"-->
  164. <!-- :labelCol="labelCol"-->
  165. <!-- :wrapperCol="wrapperCol">-->
  166. <!-- <a-input v-model="redirectUrl"></a-input>-->
  167. <!-- </a-form-item>-->
  168. <a-form-item
  169. label="出价方式"
  170. :labelCol="labelCol"
  171. :wrapperCol="wrapperCol">
  172. <a-radio-group v-model="bidType">
  173. <a-radio-button value="0">手动</a-radio-button>
  174. <!-- <a-radio-button value="1">保守</a-radio-button>-->
  175. <a-radio-button value="2" v-if="deliveryTarget==='11'">自动</a-radio-button>
  176. </a-radio-group>
  177. </a-form-item>
  178. <a-form-item
  179. label="投放方式"
  180. :labelCol="labelCol"
  181. :wrapperCol="wrapperCol">
  182. <a-radio-group v-model="flowControlMode">
  183. <a-radio-button value="0">优先跑量</a-radio-button>
  184. <a-radio-button value="1">均衡投放</a-radio-button>
  185. <a-radio-button value="3">优先低成本</a-radio-button>
  186. </a-radio-group>
  187. </a-form-item>
  188. <a-form-item
  189. label="预算"
  190. :labelCol="labelCol"
  191. :wrapperCol="wrapperCol">
  192. <a-input v-model="budgetPrice"
  193. style="width: 70%">
  194. <a-select
  195. slot="addonBefore"
  196. v-model="budgetPriceMode"
  197. style="width: 100px">
  198. <a-select-option value="0">日预算</a-select-option>
  199. <a-select-option value="1">总预算</a-select-option>
  200. </a-select>
  201. </a-input>
  202. </a-form-item>
  203. <a-form-item
  204. label="投放时间"
  205. :labelCol="labelCol"
  206. :wrapperCol="wrapperCol">
  207. <a-radio-group @change="onChangeFlowDate" v-model="flowDateType">
  208. <a-radio-button value="1">从今天起长期投放</a-radio-button>
  209. <a-radio-button value="2">设置开始和结束日期</a-radio-button>
  210. </a-radio-group>
  211. </a-form-item>
  212. <a-form-item label="投放时间"
  213. :labelCol="labelCol"
  214. v-if="showDateFlowRange"
  215. :wrapperCol="wrapperCol">
  216. <a-range-picker
  217. name="buildTime"
  218. style="width: 100%"
  219. v-model="time"/>
  220. </a-form-item>
  221. <a-form-item
  222. label="投放时段"
  223. :labelCol="labelCol"
  224. :wrapperCol="wrapperCol">
  225. <a-radio-group @change="dateQuantumChange" v-model="dateQuantum">
  226. <a-radio-button value="1">不限</a-radio-button>
  227. <a-radio-button value="2">按时间段投放</a-radio-button>
  228. </a-radio-group>
  229. </a-form-item>
  230. <a-form-item
  231. label="设置时间段"
  232. v-if="showDateQuantumRange"
  233. :labelCol="labelCol"
  234. v-model="dateQuantumRange"
  235. :wrapperCol="wrapperCol">
  236. <div id="table_time_selected1" class="table_time_selected1">
  237. </div>
  238. </a-form-item>
  239. <a-form-item
  240. label="付费方式"
  241. :labelCol="labelCol"
  242. :wrapperCol="wrapperCol">
  243. <a-radio-group @change="onChange" v-model="pricing">
  244. <a-radio-button v-if="deliveryTarget==='11'" value="9">按展示付费(oCPM)</a-radio-button>
  245. <a-radio-button v-else-if="deliveryTarget==='2'" value="2">按点击付费(CPC)</a-radio-button>
  246. <a-radio-button v-else-if="deliveryTarget==='1'" value="1">按展示付费(CPM)</a-radio-button>
  247. </a-radio-group>
  248. </a-form-item>
  249. <a-form-item
  250. label="目标转化出价"
  251. :labelCol="labelCol"
  252. :wrapperCol="wrapperCol">
  253. <a-input-number v-model="convertPrice" :min="0" :max="10000000" @change="onChange"/>
  254. </a-form-item>
  255. <a-form-item
  256. label="迭代数量"
  257. :labelCol="labelCol"
  258. :wrapperCol="wrapperCol">
  259. <a-input-number v-model="itratorNum" :min="1" :max="1000" @change="onChange"/>
  260. </a-form-item>
  261. <a-form-item :wrapperCol="{ span: 24 }"
  262. style="text-align: center">
  263. <a-button htmlType="submit" type="primary" :loading="loading">提交</a-button>
  264. <a-button style="margin-left: 8px">保存</a-button>
  265. </a-form-item>
  266. </a-form>
  267. </a-card>
  268. </template>
  269. <script>
  270. import {deleteAction, postAction, getAction} from '@/api/manage'
  271. import pick from 'lodash.pick'
  272. import jq from 'jquery'
  273. import moment from 'moment';
  274. import AFormItem from "ant-design-vue/es/form/FormItem";
  275. let dateQuantumRangeConst = '';
  276. export default {
  277. name: 'InternalModel',
  278. components: {AFormItem},
  279. data() {
  280. return {
  281. loading:false,
  282. templateName:'',
  283. title: "操作",
  284. visible: false,
  285. model: {},
  286. labelCol: {
  287. xs: {span: 24},
  288. sm: {span: 5},
  289. },
  290. wrapperCol: {
  291. xs: {span: 24},
  292. sm: {span: 16},
  293. },
  294. itratorNum:1,
  295. accountId:'',
  296. userList:[],
  297. urlId:'',
  298. urlList:[],
  299. showDownloadMode:'true',
  300. downloadMode:'android',
  301. convertId:'',
  302. showSimple:true,
  303. showConvertTargetSimple:false,
  304. showConvertTargetApi:false,
  305. convertType:'',
  306. simpleDeliverytarget:'',
  307. activeConvertList:[],
  308. deliverytargetId:null,
  309. templateName: '', //模板名称
  310. deliveryRange: '1',//投放范围
  311. deliveryForm: '1',//投放形式
  312. adCategory: '5',//广告类别
  313. deliveryTarget: '11', //投放目标
  314. downloadType: '1',//下载方式
  315. deliveryRangeShow: false,
  316. downloadUrl: '',// 下载链接
  317. externalUrl: '', //h5链接地址
  318. packageName: '',//应用包名
  319. // 直达链接
  320. // 直达链接生成方式
  321. bidType: '0',//出价方式
  322. budgetPriceMode: '0',//预算类型
  323. flowControlMode: '0',//投放方式
  324. budgetPrice: 0,//预算金额
  325. flowDateType: '1', //投放时间类型
  326. time: [], //投放时间段值
  327. dateQuantum: '1', //投放时段类型
  328. dateQuantumRange: '',// 投放时段选择值
  329. pricing: '9', //付费方式
  330. convertPrice: 0, //目标转化出价
  331. convertTarget: '',
  332. showDownloadUrl: true,
  333. showConvertTarget: true,
  334. showOpenUrlStatus: false,
  335. openUrlStatus: 'disabled',
  336. redirectUrl: '',
  337. showToAppUrl: false,
  338. showOpenUrlCreateMode: false,
  339. openUrlCreateMode: 'hand_create',
  340. name: '',
  341. showDateFlowRange: false,
  342. showDateQuantumRange: false,
  343. price: 0,
  344. filterType: "NO_EXCLUDE",
  345. flowDateList: {},
  346. form: this.$form.createForm(this),
  347. url: {
  348. urllist: '/ctop/bytedanceUrlInfo/list',
  349. userAllocationList:'/template/bind/login/list',
  350. dictListUrl: 'toutiao/dictitem/list',
  351. insertUrl: 'test/create',
  352. convertList:'template/convert/list/url'
  353. }
  354. }
  355. },
  356. methods: {
  357. refreshConvertApiId(){
  358. let params = {};
  359. getAction(this.url.convertList+'?accountId='+this.accountId+'&urlId='+this.urlId ,params).then((res)=>{
  360. console.log(res);
  361. if(res.code == 0){
  362. this.activeConvertList = res.data.active_convert_list;
  363. }else{
  364. this.$message.error(res.message);
  365. }
  366. });
  367. },
  368. changeConvertType(){
  369. if(this.convertType == 'SIMPLE'){
  370. this.showConvertTargetSimple = true;
  371. this.showConvertTargetApi = false;
  372. }else{
  373. this.refreshConvertApiId();
  374. this.showConvertTargetSimple = false;
  375. this.showConvertTargetApi = true;
  376. }
  377. },
  378. refreshUrl(value){
  379. let params = {};
  380. params.pageSize = '1000';
  381. params.type = value;
  382. getAction(this.url.urllist, params).then((res) => {
  383. if (res.success) {
  384. this.urlList = res.result.records
  385. }
  386. });
  387. },
  388. onChangedeliveRange() {
  389. if (this.deliveryRange == '1') {
  390. this.deliveryRangeShow = false;
  391. } else if (this.deliveryRange == '2') {
  392. this.deliveryRangeShow = true;
  393. }
  394. },
  395. add() {
  396. this.edit({
  397. id: null,
  398. time: [],
  399. convertPrice: 0,
  400. pricing: '9',
  401. dateQuantum: '1',
  402. dateQuantumRange: '',
  403. flowDateType: '1',
  404. budgetPrice: 0,
  405. budgetPriceMode: '0',
  406. flowControlMode: '0',
  407. bidType: '0',
  408. filterType: 'NO_EXCLUDE'
  409. });
  410. },
  411. edit(record) {
  412. // this.form.resetFields();
  413. // this.time[0] = record.startDate
  414. // this.time[1] = record.endDate
  415. this.model = Object.assign({}, record);
  416. this.visible = true;
  417. this.id = record.id
  418. this.name = record.name
  419. this.convertPrice = record.convertPrice
  420. this.budgetPrice = record.budgetPrice
  421. this.budgetPriceMode = record.budgetPriceMode
  422. this.flowControlMode = record.flowControlMode
  423. this.flowDateType = record.flowDateType
  424. this.dateQuantum = record.dateQuantum
  425. if (record.dateQuantumRange != undefined) {
  426. this.dateQuantumRange = record.dateQuantumRange
  427. dateQuantumRangeConst = record.dateQuantumRange
  428. }
  429. if (record.startDate != null && record.endDate != null) {
  430. this.time = [moment(record.startDate), moment(record.endDate)]
  431. }
  432. this.bidType = record.bidType
  433. this.pricing = record.pricing
  434. this.price = record.price
  435. this.filterType = record.filterType
  436. if (this.flowDateType == '1') {
  437. this.showDateFlowRange = false;
  438. } else {
  439. this.showDateFlowRange = true;
  440. }
  441. if (this.dateQuantum == '1') {
  442. this.showDateQuantumRange = false;
  443. } else {
  444. this.showDateQuantumRange = true;
  445. jq(function () {
  446. load_time_table('table_time_selected1', dateQuantumRangeConst);
  447. });
  448. }
  449. // this.$nextTick(() => {
  450. // this.form.setFieldsValue(pick(this.model, 'name', 'convertPrice', 'priceType', 'dateQuantum', 'flowDateType', 'budgetPriceMode', 'flowControlMode', 'bidType','budgetPrice','startDate','endDate'))
  451. // //时间格式化
  452. // });
  453. },
  454. close() {
  455. this.$emit('close');
  456. this.visible = false;
  457. },
  458. handleCancel() {
  459. this.close()
  460. },
  461. moment,
  462. disabledDate(current) {
  463. return current < moment().endOf('day');
  464. },
  465. onChangeDownloadType(value) {
  466. console.log(value);
  467. if (this.downloadType == '1') {
  468. this.urlId = null;
  469. this.showDownloadUrl = true;
  470. this.showOpenUrlStatus = false;
  471. this.showDownloadMode = true;
  472. this.refreshUrl('android');
  473. } else {
  474. this.urlId = null;
  475. this.showDownloadUrl = false;
  476. this.showOpenUrlStatus = true;
  477. this.showDownloadMode = false;
  478. this.refreshUrl('page');
  479. }
  480. },
  481. onChangeDeliveryTarget(value) {
  482. console.log(value);
  483. if (this.deliveryTarget == '11') {
  484. this.showConvertTarget = true;
  485. this.pricing='9'
  486. } else {
  487. this.showConvertTarget = false;
  488. if(this.deliveryTarget == '2'){
  489. this.pricing='2'
  490. }else if(this.deliveryTarget == '1'){
  491. this.pricing='1'
  492. }
  493. }
  494. },
  495. onChangeOpenUrlStatus() {
  496. if (this.openUrlStatus == 'disabled') {
  497. this.showOpenUrlCreateMode = false;
  498. this.showToAppUrl = false;
  499. } else {
  500. this.showOpenUrlCreateMode = true;
  501. this.showToAppUrl = true;
  502. }
  503. },
  504. handleSubmit(e) {
  505. let params = {};
  506. console.log("模板名称:" + this.templateName);
  507. console.log("投放范围:" + this.deliveryRange);
  508. console.log("投放形式:" + this.deliveryForm);
  509. console.log("广告类别:" + this.adCategory);
  510. console.log("投放目标:" + this.deliveryTarget);
  511. console.log("下载方式:" + this.downloadType);
  512. console.log("下载方式为下载链接,下载地址:" + this.downloadUrl);
  513. console.log("下载方式为落地页,链接地址:" + this.externalUrl);
  514. console.log("应用包名:" + this.packageName);
  515. console.log("跳转app链接:" + this.redirectUrl);
  516. console.log("出价方式:" + this.bidType);
  517. console.log("投放方式:" + this.flowControlMode);
  518. console.log("预算类型:" + this.budgetPriceMode);
  519. console.log("预算金额:" + this.budgetPrice);
  520. console.log("投放时间类型:" + this.flowDateType);
  521. console.log("选择起始时间:" + this.time);
  522. console.log("投放时段类型:" + this.dateQuantum);
  523. this.dateQuantumRange = '';
  524. if (this.dateQuantum == '2') {
  525. this.dateQuantumRange = jq("#table_time_selected1_time_num").val();
  526. }
  527. console.log("付费方式:" + this.priceType);
  528. console.log("目标转化出价:" + this.convertPrice);
  529. params.templateName = this.templateName;
  530. params.accountId = this.accountId;
  531. params.deliveryRange = this.deliveryRange;
  532. params.deliveryForm =this.deliveryForm;
  533. params.adCategory =this.adCategory;
  534. params.deliveryTarget =this.deliveryTarget;
  535. params.downloadType =this.downloadType;
  536. params.downloadUrl =this.downloadUrl;
  537. params.externalUrl =this.externalUrl;
  538. params.packageName =this.packageName;
  539. params.redirectUrl =this.redirectUrl;
  540. params.bidType =this.bidType;
  541. params.flowControlMode =this.flowControlMode;
  542. params.budgetPriceMode = this.budgetPriceMode;
  543. params.budgetPrice =this.budgetPrice;
  544. params.flowDateType =this.flowDateType;
  545. params.dateQuantum =this.dateQuantum;
  546. params.pricing = this.pricing;
  547. params.convertPrice = this.convertPrice;
  548. params.itratorNum = this.itratorNum;
  549. params.templateName = this.templateName;
  550. if (this.time != [] && this.time.length == 2) {
  551. params.startDate = moment(this.time[0]).format('YYYY-MM-DD HH:mm')
  552. params.endDate = moment(this.time[1]).format('YYYY-MM-DD HH:mm')
  553. }
  554. params.dateQuantumRange = this.dateQuantumRange;
  555. params.urlId = this.urlId;
  556. e.preventDefault()
  557. this.form.validateFields((err, values) => {
  558. if (!err) {
  559. /* console.log('Received values of form: ', values);
  560. this.dateQuantumRange = jq("#table_time_selected1_time_num").val();
  561. params.id = this.id;
  562. params.name = this.name;
  563. params.bidType = this.bidType;
  564. params.flowControlMode = this.flowControlMode;
  565. params.budgetPrice = this.budgetPrice;
  566. params.budgetPriceMode = this.budgetPriceMode;
  567. params.flowDateType = this.flowDateType;
  568. params.dateQuantum = this.dateQuantum;
  569. params.priceType = this.priceType;
  570. params.convertPrice = this.convertPrice;
  571. params.filterType = this.filterType;
  572. params.dateQuantumRange = this.dateQuantumRange;*/
  573. this.loading = true;
  574. console.log(params)
  575. postAction(this.url.insertUrl, params).then((res) => {
  576. console.log(res)
  577. if (res.success) {
  578. this.$message.success("批量创建成功");
  579. this.$emit('ok');
  580. this.close();
  581. } else {
  582. this.$message.warning(res.message);
  583. }
  584. this.loading = false;
  585. });
  586. }
  587. })
  588. },
  589. onChange(value) {
  590. console.log(value)
  591. },
  592. dateQuantumChange(value) {
  593. if (this.dateQuantum == '1') {
  594. this.showDateQuantumRange = false;
  595. this.dateQuantumRange = '';
  596. } else {
  597. this.showDateQuantumRange = true;
  598. jq(function () {
  599. load_time_table('table_time_selected1', dateQuantumRangeConst);
  600. });
  601. }
  602. },
  603. onChangeDownloadMode(){
  604. this.urlId = null;
  605. this.refreshUrl(this.downloadMode);
  606. },
  607. onChangeFlowDate() {
  608. console.log(this.flowDateType)
  609. if (this.flowDateType == '1') {
  610. this.showDateFlowRange = false;
  611. this.time = [];
  612. } else {
  613. this.showDateFlowRange = true;
  614. }
  615. }
  616. },
  617. created: function () {
  618. this.refreshUrl("android");
  619. let params = {};
  620. params.pageSize = '1000';
  621. params.id = this.accountId;
  622. postAction(this.url.userAllocationList, params).then((res) => {
  623. if (res.success) {
  624. this.userList = res.result.records
  625. }
  626. });
  627. }
  628. }
  629. var box_id;
  630. var StartTD = null;
  631. var StartIndex = null;
  632. var EndTD = null;
  633. var EndIndex = null;
  634. var Selected = 'Selected';
  635. var Start_x = null;
  636. var Start_y = null;
  637. //点击中表格的小时值
  638. var hour;
  639. //点击选中的星期值
  640. var week;
  641. //1为这个格子在此次鼠标拖拽过程中被选中(不执行选中方法),0为没选中过
  642. var td_state = 0;
  643. //生成星期数组
  644. var num = ['一', '二', '三', '四', '五', '六', '日'];
  645. //生成时间值数组
  646. var arr_hour = get_hour_arr();
  647. //按下鼠标左键拖动选中单元格
  648. function SelectTD(StartIndex, EndIndex, Selected) {
  649. var MinX = null;
  650. var MaxX = null;
  651. var MinY = null;
  652. var MaxY = null;
  653. var coordinate = get_coordinate(StartIndex, EndIndex);
  654. MinX = coordinate[0];
  655. MaxX = coordinate[1];
  656. MinY = coordinate[2];
  657. MaxY = coordinate[3];
  658. for (var i = MinY; i <= MaxY; i++) {
  659. for (var j = MinX; j <= MaxX; j++) {
  660. var SelectTR = jq('#' + box_id + ' table tbody tr ').eq(i);
  661. var td_class = jq("td", SelectTR).eq(j).attr('class');
  662. td_state = jq("td", SelectTR).eq(j).attr("td_state");
  663. //在同一次鼠标按下的过程中,选中过的表格不进行选中或取消操作
  664. if (!td_state) {
  665. if (td_class == Selected) {
  666. jq("td", SelectTR).eq(j).removeClass(Selected);
  667. } else {
  668. //筛选掉标明为星期的表格
  669. jq("td", SelectTR).eq(j).attr("class", Selected);
  670. }
  671. jq("td", SelectTR).eq(j).attr("td_state", '1');
  672. }
  673. }
  674. }
  675. //改变二进制值
  676. get_time_val();
  677. //改变日期显示
  678. convert_date();
  679. }
  680. //点击选中或去掉选中整行、整列
  681. function SelectTD_click(StartIndex, EndIndex, Selected) {
  682. var MinX = null;
  683. var MaxX = null;
  684. var MinY = null;
  685. var MaxY = null;
  686. var Selected_true = 0;
  687. var Selected_false = 0;
  688. var coordinate = get_coordinate(StartIndex, EndIndex);
  689. MinX = coordinate[0];
  690. MaxX = coordinate[1];
  691. MinY = coordinate[2];
  692. MaxY = coordinate[3];
  693. //列出此列当中的表格选中状态
  694. for (var i = MinY; i <= MaxY; i++) {
  695. for (var j = MinX; j <= MaxX; j++) {
  696. var SelectTR = jq('#' + box_id + ' table tbody tr ').eq(i);
  697. var td_class = jq("td", SelectTR).eq(j).attr('class');
  698. if (td_class == Selected) {
  699. //表格里存在已选中的元素
  700. Selected_true = 1;
  701. } else {
  702. //表格里存在未选中的元素
  703. Selected_false = 1;
  704. }
  705. }
  706. }
  707. //执行选中或去掉选中方法
  708. for (var i = MinY; i <= MaxY; i++) {
  709. for (var j = MinX; j <= MaxX; j++) {
  710. var SelectTR = jq('#' + box_id + ' table tbody tr ').eq(i);
  711. var td_class = jq("td", SelectTR).eq(j).attr('class');
  712. //一列当中存在已选中与未选中的表格处理:整列全部选中
  713. if (Selected_true == 1 && Selected_false == 1) {
  714. jq("td", SelectTR).eq(j).attr("class", Selected);
  715. } else if (Selected_false == 1) {
  716. //一列当中只存在未选中的表格处理:整列全部选中
  717. jq("td", SelectTR).eq(j).attr("class", Selected);
  718. } else {
  719. //一列当中只存在已选中的表格处理:整列全部去掉选中
  720. jq("td", SelectTR).eq(j).removeClass(Selected);
  721. }
  722. }
  723. }
  724. //改变二进制值
  725. get_time_val();
  726. //改变日期显示
  727. convert_date();
  728. }
  729. //获取选中范围的开始与结束的坐标
  730. function get_coordinate(StartIndex, EndIndex) {
  731. var MinX = null;
  732. var MaxX = null;
  733. var MinY = null;
  734. var MaxY = null;
  735. if (StartIndex.x < EndIndex.x) {
  736. MinX = StartIndex.x;
  737. MaxX = EndIndex.x;
  738. } else {
  739. MinX = EndIndex.x;
  740. MaxX = StartIndex.x;
  741. }
  742. if (StartIndex.y < EndIndex.y) {
  743. MinY = StartIndex.y;
  744. MaxY = EndIndex.y;
  745. } else {
  746. MinY = EndIndex.y;
  747. MaxY = StartIndex.y;
  748. }
  749. return [MinX, MaxX, MinY, MaxY];
  750. }
  751. //改变二进制值
  752. function get_time_val() {
  753. var time_type = '';
  754. jq('#' + box_id + ' table tbody').find('td').each(function (k) {
  755. var Selected_type = jq(this).attr('class');
  756. var week = jq(this).attr('week');
  757. if (Selected_type == Selected && !week) {
  758. time_type += "1";
  759. } else if (!week) {
  760. time_type += "0";
  761. }
  762. });
  763. jq('#' + box_id + '_time_num').val(time_type);
  764. // convert_date();
  765. }
  766. //二进制数转换日期
  767. function convert_date(external_binary) {
  768. //初始化周数数组
  769. var time_week_arr = [];
  770. if (!external_binary) {
  771. //内部调用,进行选中表格和输出时间操作。
  772. var binary = jq('#' + box_id + '_time_num').val();
  773. } else {
  774. //存在外部参入传入,此函数进行返回时间操作。
  775. var date_html = '';
  776. var binary = external_binary;
  777. }
  778. for (var y = 0; y < 7; y++) {
  779. //初始化小时数组
  780. var time_hour_arr = [];
  781. for (var x = 0; x < 48; x++) {
  782. //获取当前点击元素的位置
  783. if (y == 0) {
  784. var index = x;
  785. } else {
  786. var index = (y * 48) + x;
  787. }
  788. //获取td对应的二进制值
  789. var Selected_val = binary.charAt(index);
  790. if (Selected_val == 1) {
  791. //组装保存进数组里
  792. if (time_hour_arr == []) {
  793. //表格的第一个位置的值
  794. time_hour_arr = arr_hour[x];
  795. } else if (binary.charAt(index - 1) == 1 && binary.charAt(index - 2) == 1) {
  796. //此位置(包含上一行)的前两个都为选中时
  797. if (x == 0 && binary.charAt(index + 1) == 0) {
  798. //选中行里第一个,后一个表格没选中,加逗号
  799. time_hour_arr[time_hour_arr.length] = arr_hour[x] + ', ';
  800. } else if (x == 0 && binary.charAt(index + 1) == 1) {
  801. //选中行里第一个,后一个表格已选中,不加逗号
  802. time_hour_arr[time_hour_arr.length] = arr_hour[x];
  803. } else if (x == 1 && binary.charAt(index - 1) == 0) {
  804. //选中行里第二个,上一个表格没选中,加逗号
  805. time_hour_arr[time_hour_arr.length] = arr_hour[x] + ', ';
  806. } else if (x == 1 && binary.charAt(index - 1) == 1) {
  807. //选中行里第二个,上一个表格已选中,前加-号,后加逗号
  808. time_hour_arr[time_hour_arr.length] = '-' + arr_hour[x] + ', ';
  809. } else {
  810. //选中行里除第一、二的表格以外,前一个表格已经选中,此元素前加- 后加逗号
  811. time_hour_arr[time_hour_arr.length - 1] = '-' + arr_hour[x] + ', ';
  812. }
  813. } else if (binary.charAt(index - 1) == 1 && x > 0) {
  814. //选中的前一个已选中,且此次选中的不是行里第一个,此次选中的元素前加-后加逗号
  815. time_hour_arr[time_hour_arr.length] = '-' + arr_hour[x] + ', ';
  816. } else if (binary.charAt(index + 1) != 1 || x == 47) {
  817. //选中的后一个没选中,或者此次选中的是行里最后一个,此次选中的元素加逗号
  818. time_hour_arr[time_hour_arr.length] = arr_hour[x] + ', ';
  819. } else {
  820. //选中的后一已选中,此次选中的元素不加逗号
  821. time_hour_arr[time_hour_arr.length] = arr_hour[x];
  822. }
  823. }
  824. }
  825. time_week_arr[y] = time_hour_arr;
  826. }
  827. // console.info(box_id);
  828. if (!external_binary) {
  829. jq('#' + box_id + '_time_seled').html('');
  830. }
  831. //再次组装并输出数组
  832. var time_html = [];
  833. for (var y = 0; y < 7; y++) {
  834. for (var x = 0; x < time_week_arr[y].length; x++) {
  835. if (!time_html[y]) {
  836. time_html[y] = time_week_arr[y][x];
  837. } else {
  838. time_html[y] += time_week_arr[y][x];
  839. }
  840. }
  841. if (time_html[y]) {
  842. time_html[y] = time_html[y].substring(0, time_html[y].length - 2);
  843. if (!external_binary) {
  844. jq('#' + box_id + '_time_seled').append('<div>星期' + num [y] + ' (' + time_html[y] + ')' + '</div>');
  845. } else {
  846. date_html += '星期' + num [y] + ' (' + time_html[y] + ')' + ', ';
  847. }
  848. }
  849. }
  850. if (external_binary) {
  851. return date_html;
  852. }
  853. // console.info(time_html);
  854. }
  855. //生成时间值数组
  856. function get_hour_arr() {
  857. var arr_hour = [];
  858. var oDate = new Date("2016/07/01 00:00:00"); //实例一个时间对象;
  859. var oDate_hour = oDate.getHours();
  860. var oDate_minute = oDate.getMinutes();
  861. for (var i = 0; i < 48; i++) {
  862. if (oDate_minute < 10) {
  863. var oDate_minute = "0" + oDate_minute;
  864. }
  865. if (i >= 1) {
  866. oDate.setMinutes(oDate.getMinutes() + 30);
  867. oDate_hour = oDate.getHours();
  868. oDate_minute = oDate.getMinutes();
  869. if (oDate_minute < 10) {
  870. var oDate_minute = "0" + oDate_minute;
  871. }
  872. }
  873. arr_hour[i] = oDate_hour + ':' + oDate_minute;
  874. }
  875. return arr_hour;
  876. }
  877. //更新操作
  878. function renewal(id) {
  879. if (id) {
  880. box_id = id;
  881. }
  882. //解绑鼠标移动监听事件
  883. jq('#' + box_id + ' table tbody tr td').unbind("mouseover");
  884. //初始化表格的在此次选中状态
  885. jq('#' + box_id + ' table tbody tr td').attr("td_state", '');
  886. //改变二进制值
  887. get_time_val();
  888. //改变日期显示
  889. convert_date();
  890. }
  891. //二进制数赋值选中表格
  892. function binary_selected() {
  893. var default_time_val = jq('#' + box_id + ' .default_time_val').val();
  894. if (default_time_val) {
  895. for (var i = 0; i < 336; i++) {
  896. var td_selected = default_time_val.charAt(i);
  897. if (td_selected != 0) {
  898. jq('#' + box_id + ' table tbody tr td').eq(i).attr('class', 'Selected');
  899. //更新操作,显示文字形日期
  900. renewal();
  901. }
  902. }
  903. }
  904. }
  905. //实例化程序
  906. function load_time_table(id, value) {
  907. //包住table的元素id
  908. box_id = id;
  909. var html;
  910. html = '<input type="hidden" class="default_time_val" value="' + value + '"/>';
  911. html += '<table cellspacing="0" cellpadding="0" border="0" class="plug-timer-grid" onselectstart="return false" onselect="document.selection.empty()">';
  912. html += '<thead>';
  913. html += '<tr>';
  914. html += '<th></th>';
  915. html += '<th colSpan="24">上午</th>';
  916. html += '<th colSpan="24">下午</th>';
  917. html += '</tr>';
  918. html += '<tr class="hour">';
  919. html += '<th></th>';
  920. html += '</tr>';
  921. html += '</thead>';
  922. html += '<tbody></tbody>';
  923. html += '</table>';
  924. html += '<input class="focus" type="hidden" style="opacity: 0;">';
  925. html += '<div id="' + box_id + '_time_seled" style="line-height: 15px;font-size:10px;"></div>';
  926. html += '<input type="hidden" id="' + box_id + '_time_num" name="time" caption="每日投放时段" switchname="selectTime" value="' + value + '">';
  927. jq('#' + box_id).html('');
  928. jq('#' + box_id).append(html);
  929. var html_tbody_td = '';
  930. var html_thead_td = '';
  931. //创建表格
  932. for (var i = 0; i < 7; i++) {
  933. var week = i + 1;
  934. html_tbody_td += '<tr>';
  935. for (var j = 0; j < 49; j++) {
  936. if (j == 0) {
  937. html_tbody_td += '<th week="' + week + '">星期' + num[i] + '</th>';
  938. } else {
  939. html_tbody_td += '<td>' + '</td>';
  940. }
  941. }
  942. html_tbody_td += '</tr>';
  943. }
  944. //创建表格小时栏目
  945. for (var i = 0; i <= 23; i++) {
  946. html_thead_td += '<td colSpan="2" hour="' + i + '">' + i + '</td>';
  947. }
  948. jq('#' + box_id + ' table thead .hour').append(html_thead_td);
  949. jq('#' + box_id + ' table tbody').html(html_tbody_td);
  950. //检查是否有赋有二进制值,如有,将选中相应的表格
  951. binary_selected();
  952. //控制器,控制当前在哪个表格进行操作
  953. jq('.plug-timer-grid').hover(function (e) {
  954. if (1 != e.which) { //判断是否为左击
  955. var id = jq(this).parent().attr('id');
  956. box_id = id;
  957. }
  958. });
  959. //清除所有选中项
  960. jq('.clear').click(function () {
  961. jq(this).parent().find('td').removeClass(Selected);
  962. var id = jq(this).parent().attr('id');
  963. renewal(id);
  964. });
  965. //点击小时选中或去掉整列处理块
  966. jq('#' + box_id + ' table thead tr td').click(function () {
  967. hour = jq(this).attr('hour');
  968. if (hour >= 0) {
  969. var rows = jq('#' + box_id + ' table tbody tr').length;
  970. Start_x = (jq(this).index()) * 2 - 1;
  971. Start_y = 0;
  972. StartIndex = {x: Start_x, y: Start_y};
  973. EndTD = jq(this);
  974. var x = (jq(this).index()) * 2 - 2;
  975. var y = rows - 1; //为了配合for计算公式-1
  976. EndIndex = {x: x, y: y};
  977. //改变第一次按下鼠标时候的改变选中状态
  978. SelectTD_click(StartIndex, EndIndex, Selected);
  979. }
  980. });
  981. //点击星期选中或去掉整行处理块
  982. jq('#' + box_id + ' table tbody tr th').click(function () {
  983. var week = jq(this).attr('week');
  984. if (week >= 0) {
  985. var line = jq('#' + box_id + ' table tbody tr td').length / jq('#' + box_id + ' table tbody tr').length;
  986. Start_x = 0;
  987. Start_y = jq(this).parent().index();
  988. StartIndex = {x: Start_x, y: Start_y};
  989. EndTD = jq(this);
  990. var y = jq(this).parent().index();
  991. var x = line - 1; //为了配合for计算公式-1
  992. EndIndex = {x: x, y: y};
  993. //改变第一次按下鼠标时候的改变选中状态
  994. SelectTD_click(StartIndex, EndIndex, Selected);
  995. }
  996. });
  997. //监听鼠标按下事件(鼠标按下左键拖动选中处理块)
  998. jq('#' + box_id + ' table tbody tr td').unbind("mousedown").bind("mousedown", function () {
  999. //记录刚开始点击的元素位置
  1000. Start_x = jq(this).index() - 1;
  1001. Start_y = jq(this).parent().index();
  1002. StartIndex = {x: Start_x, y: Start_y};
  1003. EndTD = jq(this);
  1004. var x = jq(this).index() - 1;
  1005. var y = jq(this).parent().index();
  1006. EndIndex = {x: x, y: y};
  1007. //改变第一次按下鼠标时候的改变选中状态
  1008. SelectTD(StartIndex, EndIndex, Selected);
  1009. StartTD = jq(this);
  1010. StartIndex = {x: Start_x, y: Start_y};
  1011. //监听鼠标移动事件,实现改变后续鼠标拖拽时候的表格选中状态
  1012. jq('#' + box_id + ' table tbody tr td').mouseover(function (e) {
  1013. EndTD = jq(this);
  1014. var x = jq(this).index() - 1;
  1015. var y = jq(this).parent().index();
  1016. EndIndex = {x: x, y: y};
  1017. if (1 != e.which) { //判断是否为左击
  1018. jq('#' + box_id + ' table tbody tr td').unbind("mouseover");
  1019. }
  1020. //去除停留在td上的光标
  1021. jq('#' + box_id + ' .focus').focus();
  1022. SelectTD(StartIndex, EndIndex, Selected);
  1023. });
  1024. //放开鼠标左键时,初始化相关参数和解绑相关监听
  1025. jq('html').unbind("mouseup").bind("mouseup", function () {
  1026. renewal();
  1027. });
  1028. });
  1029. }
  1030. /*外部调用接口*/
  1031. //解绑鼠标松开监听事件
  1032. function unbundle_mouseover() {
  1033. jq('html').unbind("mouseup");
  1034. }
  1035. /*二进制获取转换后的时间*/
  1036. function get_time_html(binary) {
  1037. return convert_date(binary);
  1038. }
  1039. jq(function () {
  1040. load_time_table('table_time_selected1', this.dateQuantumRange);
  1041. });
  1042. </script>
  1043. <style type="text/css">
  1044. .plug-timer-grid {
  1045. width: 100%;
  1046. }
  1047. .plug-timer-grid td, .plug-timer-grid th {
  1048. border: 1px solid #97B4D1;
  1049. text-align: center; /*cursor:pointer;*/
  1050. font-size: 10px;
  1051. line-height: 10px;
  1052. }
  1053. .Selected {
  1054. background-color: rgb(102, 162, 243);
  1055. opacity: 0.5;
  1056. }
  1057. .plug-timer-grid {
  1058. border-collapse: collapse;
  1059. z-index: 4;
  1060. }
  1061. .plug-timer-grid thead tr {
  1062. display: table-row;
  1063. vertical-align: inherit;
  1064. border-color: inherit;
  1065. }
  1066. table td {
  1067. height: 20px;
  1068. max-width: 5px;
  1069. border: 1px solid #dfe6ec;
  1070. font-size: 12px;
  1071. text-align: center;
  1072. vertical-align: middle;
  1073. overflow: hidden;
  1074. transition: background .5s;
  1075. -webkit-transition: background .5s;
  1076. }
  1077. .plug-timer-grid tbody th {
  1078. width: 4%;
  1079. }
  1080. .plug-timer-grid tbody tr td {
  1081. width: 2%;
  1082. }
  1083. /*.clear{*/
  1084. /* margin:20px 0px 20px 0px;*/
  1085. /*}*/
  1086. </style>