policy-management.vue 40 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906
  1. <template>
  2. <div class="policy-management-content">
  3. <div class="control-con-title">
  4. <div><span class="policy-export-btn">销售政策列表</span></div>
  5. <div>
  6. <!-- <span><a-button type="default" @click="handlePolicyExport">政策导出</a-button></span> -->
  7. <span class="add-acount-policy-btn"><a-button type="primary" @click="handleAddAccountPolicy">创建账户政策</a-button></span>
  8. </div>
  9. </div>
  10. <div class="control-con-header">
  11. <a-form
  12. class="grid-form"
  13. layout="inline"
  14. :form="searchForm"
  15. hide-required-mark
  16. @submit="handleQueryList"
  17. >
  18. <a-row class="grid-form-options">
  19. <a-form-item
  20. class="grid-form-item"
  21. label="公司名称:"
  22. :colon="false"
  23. >
  24. <a-input v-model="configForm.companyName" placeholder="请输入公司名称"/>
  25. </a-form-item>
  26. <a-form-item
  27. class="grid-form-item"
  28. label="广告主名称:"
  29. :colon="false"
  30. >
  31. <a-input v-model="configForm.adverName" placeholder="请输入广告主名称"/>
  32. </a-form-item>
  33. <a-form-item
  34. class="grid-form-item"
  35. label="产品名称:"
  36. :colon="false"
  37. >
  38. <a-input v-model="configForm.productName" placeholder="请输入产品名称"/>
  39. </a-form-item>
  40. <a-form-item label="媒体:">
  41. <a-select v-model="configForm.creativeMedia" style="width: 100px">
  42. <a-select-option :value="2">不限</a-select-option>
  43. <a-select-option value="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL">快手</a-select-option>
  44. <a-select-option value="CREATIVE_IMAGE_MODE_LARGE">头条</a-select-option>
  45. </a-select>
  46. </a-form-item>
  47. <a-form-item label="返点类型:">
  48. <a-select v-model="configForm.creativeRebate" style="width: 100px">
  49. <a-select-option :value="2">不限</a-select-option>
  50. <a-select-option value="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL">返现</a-select-option>
  51. <a-select-option value="CREATIVE_IMAGE_MODE_LARGE">返货</a-select-option>
  52. <a-select-option value="CREATIVE_IMAGE_MODE_LARGE_VERTICAL">返现+返货</a-select-option>
  53. </a-select>
  54. </a-form-item>
  55. </a-row>
  56. <a-row>
  57. <a-form-item
  58. class="grid-form-item"
  59. label="垫付公司名称:"
  60. :colon="false"
  61. >
  62. <a-input v-model="configForm.creativeAdvance" placeholder="请输入垫付公司名称"/>
  63. </a-form-item>
  64. <a-form-item label="销售:">
  65. <a-select v-model="configForm.creativeSale" style="width: 100px">
  66. <a-select-option :value="2">不限</a-select-option>
  67. <a-select-option value="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL">竖版视频</a-select-option>
  68. <a-select-option value="CREATIVE_IMAGE_MODE_LARGE">大图横图</a-select-option>
  69. <a-select-option value="CREATIVE_IMAGE_MODE_LARGE_VERTICAL">大图竖图</a-select-option>
  70. <a-select-option value="CREATIVE_IMAGE_MODE_UNION_SPLASH">开屏</a-select-option>
  71. </a-select>
  72. </a-form-item>
  73. <a-form-item label="运营方式:">
  74. <a-select v-model="configForm.creativeOperate" style="width: 100px">
  75. <a-select-option :value="2">不限</a-select-option>
  76. <a-select-option value="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL">自运营</a-select-option>
  77. <a-select-option value="CREATIVE_IMAGE_MODE_LARGE">代运营</a-select-option>
  78. </a-select>
  79. </a-form-item>
  80. <a-form-item
  81. class="grid-form-item"
  82. label="时间:"
  83. :colon="false"
  84. >
  85. <a-range-picker
  86. v-model="configForm.time"
  87. format="YYYY-MM-DD"
  88. />
  89. </a-form-item>
  90. <a-form-item label="状态:">
  91. <a-select v-model="configForm.searchStatus" style="width: 100px">
  92. <a-select-option :value="2">不限</a-select-option>
  93. <a-select-option :value="0">待审核</a-select-option>
  94. <a-select-option :value="1">审核中</a-select-option>
  95. <a-select-option :value="1">审核通过</a-select-option>
  96. <a-select-option :value="1">审核拒绝</a-select-option>
  97. </a-select>
  98. </a-form-item>
  99. <a-form-item class="form-handle-btn">
  100. <a-button type="default" class="reset-class" @click="handleResetList">重置</a-button>
  101. <a-button type="primary" html-type="submit">搜索</a-button>
  102. </a-form-item>
  103. </a-row>
  104. </a-form>
  105. </div>
  106. <div class="control-con-table">
  107. <a-table
  108. ref="table"
  109. size="middle"
  110. bordered
  111. :columns="columns"
  112. :dataSource="dataSource"
  113. :pagination="false"
  114. :scroll="{x: 3000}"
  115. >
  116. <span slot="accountId_dictText" slot-scope="text">
  117. <a>{{ text }}</a>
  118. </span>
  119. <span slot="validBalance" slot-scope="text">
  120. <a>{{ text }}</a>
  121. </span>
  122. <span slot="adCpaBidStr" slot-scope="text">
  123. <a>{{ text }}</a>
  124. </span>
  125. <span slot="action" slot-scope="text, record">
  126. <a @click="handleDetail">查看</a>
  127. <a-divider type="vertical"/>
  128. <a @click="handleSubmitReview(text)">提交审核</a>
  129. <a-divider type="vertical"/>
  130. <a @click="handleEditTable(record)">编辑</a>
  131. <a-divider type="vertical"/>
  132. <a @click="handleAuditSure">审核通过</a>
  133. <a-divider type="vertical"/>
  134. <a @click="handleAuditCancel">审核拒绝</a>
  135. </span>
  136. <span slot="reason" slot-scope="text, record">
  137. <a @click="handleRejectionReason(text)">被拒原因</a>
  138. </span>
  139. </a-table>
  140. <a-pagination
  141. class="pagin-table-class"
  142. :total="totalAll"
  143. :show-total="total => `共 ${totalAll} 条`"
  144. size="small"
  145. show-size-changer
  146. show-quick-jumper
  147. @change="onShowSizeChange"
  148. @showSizeChange="onShowSizeChange"
  149. />
  150. </div>
  151. <!-- 被拒理由 -->
  152. <a-modal
  153. v-if="rejectionReasonStatus"
  154. title="审核不通过"
  155. :visible="rejectionReasonStatus"
  156. dialog-class="rejection-reason-class"
  157. @ok="handleModeSure"
  158. @cancel="handleModeCancel"
  159. >
  160. <div>
  161. <div class="reason-class-header">请输入审核不通过的理由:</div>
  162. <div>显示不通过的理由</div>
  163. </div>
  164. </a-modal>
  165. <!-- 查看详情 -->
  166. <a-modal
  167. v-if="auditPolicyStatus"
  168. title="审核政策"
  169. :visible="auditPolicyStatus"
  170. :closable="false"
  171. okText="审核通过"
  172. cancelText="审核拒绝"
  173. dialog-class="audit-policy-class"
  174. @ok="handleAuditSure"
  175. @cancel="handleAuditCancel"
  176. >
  177. <div>
  178. <span class="audit-policy-icon" @click="handleCloseAuditPolicy"><a-icon type="close"/></span>
  179. <div class="policy-line-quen">
  180. <div class="line-quen-left">
  181. <div class="policy-line-left">
  182. <span class="line-left-spn">公司名称:</span>
  183. <span class="line-right-spn">北京有限公司北京有限公司北京有限公司北京有限公司北京有限公司北京有限公司</span>
  184. </div>
  185. <div class="policy-line-left">
  186. <span class="line-left-spn">广告主:</span>
  187. <span class="line-right-spn">北京有限公司</span>
  188. </div>
  189. <div class="policy-line-left">
  190. <span class="line-left-spn">产品名称:</span>
  191. <div style="width: 200px;">
  192. <div class="line-right-spn">产品名称产品名称产品名称产品名称产品名称产品名称</div>
  193. <div class="line-right-spn">产品名称</div>
  194. <div class="line-right-spn">产品名称</div>
  195. </div>
  196. </div>
  197. <div class="policy-line-left">
  198. <span class="line-left-spn">媒体:</span>
  199. <span class="line-right-spn">产品名称</span>
  200. </div>
  201. <div class="policy-line-left">
  202. <span class="line-left-spn">销售:</span>
  203. <span class="line-right-spn">产品名称</span>
  204. </div>
  205. <div class="policy-line-left">
  206. <span class="line-left-spn">区域:</span>
  207. <span class="line-right-spn">产品名称</span>
  208. </div>
  209. <div class="policy-line-left">
  210. <span class="line-left-spn">我司主体:</span>
  211. <span class="line-right-spn">产品名称</span>
  212. </div>
  213. <div class="policy-line-left">
  214. <span class="line-left-spn">运营方式:</span>
  215. <span class="line-right-spn">产品名称</span>
  216. </div>
  217. <div class="policy-line-left">
  218. <span class="line-left-spn">集团简称:</span>
  219. <span class="line-right-spn">产品名称</span>
  220. </div>
  221. </div>
  222. <div class="line-quen-right">
  223. <div class="policy-line-right">
  224. <span class="line-left-spn">是否预付:</span>
  225. <span class="line-right-spn">否</span>
  226. </div>
  227. <div class="policy-line-right">
  228. <span class="line-left-spn">返点类型:</span>
  229. <span class="line-right-spn">返现</span>
  230. </div>
  231. <div class="policy-line-right">
  232. <span class="line-left-spn">返点比例:</span>
  233. <span class="line-right-spn">3%</span>
  234. </div>
  235. <div class="policy-line-right">
  236. <span class="line-left-spn">账期:</span>
  237. <span class="line-right-spn">3%</span>
  238. </div>
  239. <div class="policy-line-right">
  240. <span class="line-left-spn">是否第三方支付:</span>
  241. <span class="line-right-spn">3%</span>
  242. </div>
  243. <div class="policy-line-right">
  244. <span class="line-left-spn">垫付公司:</span>
  245. <span class="line-right-spn">3%</span>
  246. </div>
  247. <div class="policy-line-right">
  248. <span class="line-left-spn">垫付返现:</span>
  249. <span class="line-right-spn">3%</span>
  250. </div>
  251. <div class="policy-line-right">
  252. <span class="line-left-spn">政策起止时间:</span>
  253. <span class="line-right-spn">3%</span>
  254. </div>
  255. <div class="policy-line-right">
  256. <span class="line-left-spn">备注:</span>
  257. <span class="line-right-spn">3%</span>
  258. </div>
  259. </div>
  260. </div>
  261. </div>
  262. </a-modal>
  263. <!-- 审核拒绝 -->
  264. <a-modal
  265. v-if="rejectAuditStatus"
  266. title="审核不通过"
  267. :visible="rejectAuditStatus"
  268. dialog-class="rejection-reason-class"
  269. @ok="handleRejectSure"
  270. @cancel="handleRejectCancel"
  271. >
  272. <div>
  273. <div class="reason-class-header">请输入审核不通过的理由:</div>
  274. <a-form-model
  275. ref="rejectRuleForm"
  276. :model="reasonForm"
  277. :rules="reasonRules"
  278. >
  279. <a-form-model-item label="" prop="desc">
  280. <a-input
  281. class="rejection-textarea-msg"
  282. v-model="reasonForm.desc"
  283. type="textarea"
  284. placeholder="请输入至少五个字符"
  285. />
  286. </a-form-model-item>
  287. </a-form-model>
  288. </div>
  289. </a-modal>
  290. <!-- 新增、编辑政策 -->
  291. <a-modal
  292. v-if="policyOperationStatus"
  293. :title="addType === 'add' ? '新增政策' : '编辑政策'"
  294. :visible="policyOperationStatus"
  295. dialog-class="policy-operation-class"
  296. @ok="handlePolicyOperationSure"
  297. @cancel="handlePolicyOperationCancel"
  298. >
  299. <div>
  300. <a-form-model
  301. class="policy-operation-form"
  302. ref="policyOperationForm"
  303. :model="policyOperationForm"
  304. :rules="policyOperationRules"
  305. :label-col="labelCol"
  306. :wrapper-col="wrapperCol"
  307. >
  308. <a-row class="policy-operation-form-left">
  309. <a-form-model-item label="公司名称" prop="name1">
  310. <a-input
  311. v-model="policyOperationForm.name1"
  312. placeholder="请输入公司名称"
  313. allow-clear
  314. />
  315. </a-form-model-item>
  316. <a-form-model-item label="广告主" prop="name1">
  317. <a-input
  318. v-model="policyOperationForm.name3"
  319. placeholder="请输入广告主"
  320. allow-clear
  321. />
  322. </a-form-model-item>
  323. <!-- <a-form-model-item label="产品名称">
  324. <a-button type="primary" @click="handleAddOrigin">
  325. <a-icon type="plus"/>产品名称
  326. </a-button>
  327. <span class="especial-label">*</span>
  328. </a-form-model-item>
  329. <div class="adver-position-radio">
  330. <a-form-model-item
  331. v-for="(item, index) in policyOperationForm.defaultFormList"
  332. :key="item.id"
  333. :prop="'defaultFormList.' + index + '.value'"
  334. :rules="[
  335. {required: true, message: '请输入', trigger: 'blur'},
  336. {min: 6, max: 9, message: '请输入6-9个字', trigger: 'blur'},
  337. ]"
  338. >
  339. <a-input class="input-common-short" v-model="item.value" placeholder="请输入" allow-clear/>
  340. <a-icon class="circle-icon-class" type="minus-circle" @click="handleDelOrigin(item)"/>
  341. </a-form-model-item>
  342. </div> -->
  343. <div class="product-name-class" v-for="(item, index) in policyOperationForm.defaultFormList" :key="item.id">
  344. <a-form-model-item
  345. :label="index === 0 ? '产品名称' : ''"
  346. :class="{'isActive': index > 0 }"
  347. :prop="'defaultFormList.' + index + '.value'"
  348. :rules="changeRules"
  349. >
  350. <a-input class="input-common-short" v-model="item.value" placeholder="请输入" allow-clear/>
  351. <a-icon v-if="index === 0" class="circle-icon-class circle-icon-plus" type="plus-circle" @click="handleAddOrigin"/>
  352. <a-icon v-if="policyOperationForm.defaultFormList.length > 1 && index === 0" class="circle-icon-class circle-icon-minus" type="minus-circle" @click="handleDelOrigin(item)"/>
  353. <a-icon v-if="policyOperationForm.defaultFormList.length > 1 && index > 0" class="circle-icon-class circle-icon-plus" type="minus-circle" @click="handleDelOrigin(item)"/>
  354. </a-form-model-item>
  355. </div>
  356. <a-form-model-item label="媒体" prop="name6">
  357. <a-select v-model="policyOperationForm.name6" placeholder="请选择投放媒体">
  358. <a-select-option :value="1">快手</a-select-option>
  359. <a-select-option :value="2">头条</a-select-option>
  360. </a-select>
  361. </a-form-model-item>
  362. <a-form-model-item label="销售" prop="name7">
  363. <a-select v-model="policyOperationForm.name7" placeholder="请选择所属销售">
  364. <a-select-option :value="2">不限</a-select-option>
  365. <a-select-option :value="0">待审核</a-select-option>
  366. </a-select>
  367. </a-form-model-item>
  368. <a-form-model-item label="区域" prop="name8">
  369. <a-select v-model="policyOperationForm.name8" placeholder="请选择区域">
  370. <a-select-option :value="2">不限</a-select-option>
  371. <a-select-option :value="0">待审核</a-select-option>
  372. </a-select>
  373. </a-form-model-item>
  374. <a-form-model-item label="我司主体" prop="name9">
  375. <a-select v-model="policyOperationForm.name9" placeholder="请选择我司主体">
  376. <a-select-option :value="2">不限</a-select-option>
  377. <a-select-option :value="0">待审核</a-select-option>
  378. </a-select>
  379. </a-form-model-item>
  380. <a-form-model-item label="运营方式" prop="name10">
  381. <a-radio-group v-model="policyOperationForm.name10" button-style="solid">
  382. <a-radio-button value="a">自运营</a-radio-button>
  383. <a-radio-button value="b">代运营</a-radio-button>
  384. </a-radio-group>
  385. </a-form-model-item>
  386. <a-form-model-item label="集团简称">
  387. <a-input
  388. v-model="policyOperationForm.name11"
  389. placeholder="请输入集团简称"
  390. allow-clear
  391. @change="handleGroupAbbreviationChange"
  392. />
  393. </a-form-model-item>
  394. <div v-if="subTitleMsgStatus" style="color: #f00;margin-left: 140px">只能输入30个汉字</div>
  395. </a-row>
  396. <a-row class="policy-operation-form-right">
  397. <a-form-model-item label="是否预付" prop="name2">
  398. <a-radio-group v-model="policyOperationForm.name2" button-style="solid" @change="handlePrepaidNotChange">
  399. <a-radio-button value="a">是</a-radio-button>
  400. <a-radio-button value="b">否</a-radio-button>
  401. </a-radio-group>
  402. </a-form-model-item>
  403. <a-form-model-item label="返点类型:" prop="name4">
  404. <a-select v-model="policyOperationForm.name4" placeholder="请选择返点类型">
  405. <a-select-option :value="2">不限</a-select-option>
  406. <a-select-option :value="0">待审核</a-select-option>
  407. <a-select-option :value="1">审核中</a-select-option>
  408. <a-select-option :value="1">审核通过</a-select-option>
  409. <a-select-option :value="1">审核拒绝</a-select-option>
  410. </a-select>
  411. </a-form-model-item>
  412. <a-form-model-item label="返点比例" prop="name12">
  413. <a-input-number
  414. v-model="policyOperationForm.name12"
  415. :precision="2"
  416. /> %
  417. </a-form-model-item>
  418. <a-form-model-item v-if="policyOperationForm.name2 === 'b'" label="账期" prop="name13">
  419. <a-input-number
  420. v-model="policyOperationForm.name13"
  421. :precision="0"
  422. /> 天
  423. </a-form-model-item>
  424. <a-form-model-item v-if="policyOperationForm.name2 === 'b'" label="是否第三方垫付" prop="name14">
  425. <a-radio-group v-model="policyOperationForm.name14" button-style="solid">
  426. <a-radio-button value="a">是</a-radio-button>
  427. <a-radio-button value="b">否</a-radio-button>
  428. </a-radio-group>
  429. </a-form-model-item>
  430. <a-form-model-item v-if="policyOperationForm.name14 === 'a'" label="垫付公司" prop="name15">
  431. <a-input
  432. v-model="policyOperationForm.name15"
  433. placeholder="请输入垫付公司"
  434. allow-clear
  435. />
  436. </a-form-model-item>
  437. <a-form-model-item v-if="policyOperationForm.name14 === 'a'" label="垫付返点" prop="name16">
  438. <a-input
  439. v-model="policyOperationForm.name16"
  440. placeholder="请输入垫付返点"
  441. allow-clear
  442. />
  443. </a-form-model-item>
  444. <a-form-model-item label="政策起止时间" prop="name17">
  445. <a-range-picker
  446. v-model="policyOperationForm.name17"
  447. format="YYYY-MM-DD"
  448. />
  449. </a-form-model-item>
  450. <a-form-model-item label="备注">
  451. <a-input
  452. v-model="policyOperationForm.name18"
  453. placeholder="请输入备注"
  454. allow-clear
  455. @change="handleRemarksChange"
  456. />
  457. </a-form-model-item>
  458. <div v-if="remarksStatus" style="color: #f00;margin-left: 140px">只能输入100个汉字</div>
  459. </a-row>
  460. </a-form-model>
  461. </div>
  462. </a-modal>
  463. </div>
  464. </template>
  465. <script>
  466. export default {
  467. name: 'policy-management',
  468. data() {
  469. let handleCharacterLen30 = (rule, value, callback) => {
  470. this.handleExportRules(value, 1, 30, callback);
  471. };
  472. return {
  473. subTitleMsgStatus: false,
  474. remarksStatus: false,
  475. changeRules: [
  476. {required: true, message: '请输入产品名称', trigger: 'blur'},
  477. {validator: handleCharacterLen30, trigger: 'blur'}
  478. ],
  479. addType: 'add',
  480. labelCol: {span: 7},
  481. wrapperCol: {span: 14},
  482. rejectAuditStatus: false,
  483. rejectionReasonStatus: false,
  484. auditPolicyStatus: false,
  485. policyOperationStatus: false,
  486. totalAll: 0,
  487. policyOperationForm: {
  488. defaultFormList: [
  489. {
  490. id: 1,
  491. value: ''
  492. }
  493. ],
  494. name1: '',
  495. name2: 'a',
  496. name3: '',
  497. name4: undefined,
  498. name6: 1,
  499. name7: undefined,
  500. name8: undefined,
  501. name9: undefined,
  502. name10: 'b',
  503. name11: '',
  504. name12: '',
  505. name13: '',
  506. name14: undefined,
  507. name15: '',
  508. name16: '',
  509. name17: [],
  510. name18: ''
  511. },
  512. reasonForm: {
  513. desc: ''
  514. },
  515. policyOperationRules: {
  516. name1: [
  517. {required: true, message: '请输入公司名称', trigger: 'blur'},
  518. {validator: handleCharacterLen30, trigger: 'blur'}
  519. ],
  520. name3: [
  521. {required: true, message: '请输入广告主名称', trigger: 'blur'},
  522. {validator: handleCharacterLen30, trigger: 'blur'}
  523. ],
  524. name4: [{required: true, message: '请选择返点类型', trigger: 'change'}],
  525. name6: [{required: true, message: '请选择投放媒体', trigger: 'change'}],
  526. name7: [{required: true, message: '请选择所属销售', trigger: 'change'}],
  527. name8: [{required: true, message: '请选择区域', trigger: 'change'}],
  528. name9: [{required: true, message: '请选择我司主体', trigger: 'change'}],
  529. name12: [{required: true, message: '请输入返点比例', trigger: 'blur'}],
  530. name13: [{required: true, message: '请输入账期', trigger: 'blur'}],
  531. name15: [
  532. {required: true, message: '请输入垫付公司', trigger: 'blur'},
  533. {validator: handleCharacterLen30, trigger: 'blur'}
  534. ],
  535. name16: [{required: true, message: '请输入垫付返点', trigger: 'blur'}],
  536. name17: [{required: true, message: '请选择时间', trigger: 'change'}],
  537. },
  538. reasonRules: {
  539. desc: [
  540. {required: true, message: '请输入审核拒绝理由', trigger: 'blur'},
  541. {min: 5, max: 100, message: '请输入5-100个字符', trigger: 'blur'}
  542. ]
  543. },
  544. dataSource: [
  545. {
  546. status: '腾讯科技有限公司',
  547. accountId_dictText: '腾讯科技有限公司',
  548. creativeImageMode: '产品名称',
  549. accountId: '快手',
  550. createTime: '何甜甜',
  551. validBalance: '待审核',
  552. accountBudget: '是',
  553. adCpaBidStr: '80天',
  554. cost: '返现',
  555. cost11: '3%',
  556. cost22: '是',
  557. cost33: '酒气有限公司',
  558. cost44: '3%',
  559. cost55: '代运营',
  560. cost66: '2020-12-04',
  561. cost77: '这个是备注',
  562. }
  563. ],
  564. columns: [
  565. {
  566. title: '公司名称',
  567. align: 'center',
  568. dataIndex: 'status',
  569. width: 150
  570. },
  571. {
  572. title: '广告主',
  573. align: 'center',
  574. dataIndex: 'accountId_dictText',
  575. width: 150,
  576. scopedSlots: {customRender: 'accountId_dictText'}
  577. },
  578. {
  579. title: '产品',
  580. align: 'center',
  581. dataIndex: 'creativeImageMode',
  582. width: 150
  583. },
  584. {
  585. title: '媒体',
  586. align: 'center',
  587. dataIndex: 'accountId',
  588. width: 150
  589. },
  590. {
  591. title: '销售',
  592. dataIndex: 'createTime',
  593. align: 'center',
  594. width: 150
  595. },
  596. {
  597. title: '状态',
  598. dataIndex: 'validBalance',
  599. align: 'center',
  600. width: 150,
  601. scopedSlots: {customRender: 'validBalance'}
  602. },
  603. {
  604. title: '是否预付',
  605. dataIndex: 'accountBudget',
  606. width: 180,
  607. align: 'center'
  608. },
  609. {
  610. title: '账期',
  611. dataIndex: 'adCpaBidStr',
  612. align: 'center',
  613. width: 150,
  614. scopedSlots: {customRender: 'adCpaBidStr'}
  615. },
  616. {
  617. title: '返点类型',
  618. align: 'center',
  619. dataIndex: 'cost',
  620. width: 150
  621. },
  622. {
  623. title: '返点比例',
  624. align: 'center',
  625. dataIndex: 'cost11',
  626. width: 150
  627. },
  628. {
  629. title: '是否垫付',
  630. align: 'center',
  631. dataIndex: 'cost22',
  632. width: 150
  633. },
  634. {
  635. title: '垫付公司',
  636. align: 'center',
  637. dataIndex: 'cost33',
  638. width: 150
  639. },
  640. {
  641. title: '垫付公司返点',
  642. align: 'center',
  643. dataIndex: 'cost44',
  644. width: 150
  645. },
  646. {
  647. title: '运营方式',
  648. align: 'center',
  649. dataIndex: 'cost55',
  650. width: 150
  651. },
  652. {
  653. title: '政策日期',
  654. align: 'center',
  655. dataIndex: 'cost66',
  656. width: 150
  657. },
  658. {
  659. title: '备注',
  660. align: 'center',
  661. dataIndex: 'cost77',
  662. width: 150
  663. },
  664. {
  665. title: '操作',
  666. dataIndex: 'action',
  667. align: 'center',
  668. width: 250,
  669. fixed: 'right',
  670. scopedSlots: {customRender: 'action'}
  671. },
  672. {
  673. title: '审核理由',
  674. dataIndex: 'reason',
  675. align: 'center',
  676. width: 150,
  677. fixed: 'right',
  678. scopedSlots: {customRender: 'reason'}
  679. }
  680. ],
  681. configForm: {
  682. companyName: undefined,
  683. adverName: undefined,
  684. productName: undefined,
  685. creativeMedia: 2,
  686. creativeRebate: 2,
  687. creativeAdvance: undefined,
  688. creativeSale: undefined,
  689. creativeOperate: 2,
  690. time: [],
  691. searchStatus: 2
  692. },
  693. tablePag: {
  694. page: 1,
  695. size: 10
  696. }
  697. };
  698. },
  699. created() {
  700. this.searchForm = this.$form.createForm(this);
  701. },
  702. methods: {
  703. handleRemarksChange(e) {
  704. const targetVal = e.target.value;
  705. let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/;
  706. let length = 0;
  707. let strArr = targetVal.split('');
  708. strArr.forEach(item => {
  709. if (cnReg.test(item)) {
  710. length += 2;
  711. }
  712. else {
  713. length += 1;
  714. }
  715. });
  716. if (1 <= length && length <= 200) {
  717. this.remarksStatus = false;
  718. }
  719. else {
  720. this.remarksStatus = true;
  721. }
  722. },
  723. handleGroupAbbreviationChange(e) {
  724. const targetVal = e.target.value;
  725. let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/;
  726. let length = 0;
  727. let strArr = targetVal.split('');
  728. strArr.forEach(item => {
  729. if (cnReg.test(item)) {
  730. length += 2;
  731. }
  732. else {
  733. length += 1;
  734. }
  735. });
  736. if (1 <= length && length <= 60) {
  737. this.subTitleMsgStatus = false;
  738. }
  739. else {
  740. this.subTitleMsgStatus = true;
  741. }
  742. },
  743. disabledDate(current) {
  744. return current > moment().subtract(1, 'day');
  745. },
  746. handleAddOrigin() {
  747. const randomNum = new Date().getTime() + Math.ceil(Math.random() * 1000);
  748. this.$nextTick(() => {
  749. this.policyOperationForm.defaultFormList.push({
  750. id: randomNum,
  751. value: ''
  752. });
  753. });
  754. },
  755. handleDelOrigin(list) {
  756. if (this.policyOperationForm.defaultFormList.length === 1) {
  757. return;
  758. }
  759. let formData = this.policyOperationForm.defaultFormList;
  760. this.policyOperationForm.defaultFormList = formData.filter(item => list.id !== item.id);
  761. },
  762. handlePrepaidNotChange(e) {
  763. if (e.target.value === 'a') {
  764. this.policyOperationForm.name14 = undefined;
  765. }
  766. else if (e.target.value === 'b') {
  767. this.policyOperationForm.name14 = 'a';
  768. }
  769. },
  770. handleExportRules(value, min, max, callback) {
  771. let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/;
  772. let length = 0;
  773. let strArr = value.split('');
  774. strArr.forEach(item => {
  775. if (cnReg.test(item)) {
  776. length += 2;
  777. }
  778. else {
  779. length += 1;
  780. }
  781. });
  782. if (min * 2 <= length && length <= max * 2) {
  783. callback();
  784. }
  785. else {
  786. callback(`只能输入${min}-${max}个汉字`);
  787. }
  788. },
  789. // 分页操作按钮
  790. onShowSizeChange(current, pageSize) {
  791. // this.tablePag = {
  792. // page: current,
  793. // size: pageSize
  794. // };
  795. // this.handleInitTable();
  796. },
  797. handleEditTable() {
  798. this.addType = 'edit';
  799. this.policyOperationStatus = true;
  800. },
  801. // 政策导出按钮
  802. handlePolicyExport() {
  803. console.log('政策导出按钮');
  804. },
  805. // 新增政策按钮
  806. handleAddAccountPolicy() {
  807. console.log('新增政策按钮');
  808. this.addType = 'add';
  809. this.policyOperationStatus = true;
  810. },
  811. // 新增政策确定按钮
  812. handlePolicyOperationSure() {
  813. console.log('新增政策确定按钮');
  814. this.$refs.policyOperationForm.validate(valid => {
  815. if (valid) {
  816. this.policyOperationStatus = false;
  817. }
  818. else {
  819. console.log('error submit!!');
  820. return false;
  821. }
  822. });
  823. },
  824. // 新增政策取消按钮
  825. handlePolicyOperationCancel() {
  826. console.log('新增政策取消按钮');
  827. this.policyOperationStatus = false;
  828. },
  829. // 审核拒绝确定按钮
  830. handleRejectSure() {
  831. console.log('审核拒绝确定按钮');
  832. this.$refs.rejectRuleForm.validate(valid => {
  833. if (valid) {
  834. console.log('submit!');
  835. this.rejectAuditStatus = false;
  836. }
  837. else {
  838. console.log('error submit!!');
  839. return false;
  840. }
  841. });
  842. },
  843. // 审核拒绝取消按钮
  844. handleRejectCancel() {
  845. this.reasonForm.desc = '';
  846. this.rejectAuditStatus = false;
  847. },
  848. // 查看的按钮
  849. handleDetail(list) {
  850. console.log(list, '查看的按钮');
  851. this.auditPolicyStatus = true;
  852. },
  853. // 查看的取消按钮
  854. handleCloseAuditPolicy() {
  855. this.auditPolicyStatus = false;
  856. },
  857. // 查看-审核政策-审核通过-按钮
  858. handleAuditSure() {
  859. let that = this;
  860. this.$confirm({
  861. title: '提示',
  862. content: '确认该政策审核通过',
  863. onOk() {}
  864. });
  865. },
  866. // 查看-审核政策-审核拒绝-按钮
  867. handleAuditCancel() {
  868. this.rejectAuditStatus = true;
  869. },
  870. // 提交审核弹窗
  871. handleSubmitReview(val) {
  872. let that = this;
  873. this.$confirm({
  874. title: '提示',
  875. content: '是否确认重新提交政策审核',
  876. onOk() {}
  877. });
  878. },
  879. // 被拒理由的操作
  880. handleRejectionReason(val) {
  881. console.log('被拒理由的操作');
  882. this.rejectionReasonStatus = true;
  883. },
  884. // 被拒理由确定按钮
  885. handleModeSure() {
  886. console.log('被拒理由确定按钮');
  887. this.rejectionReasonStatus = false;
  888. },
  889. // 被拒理由取消按钮
  890. handleModeCancel() {
  891. this.rejectionReasonStatus = false;
  892. },
  893. // 搜索按钮
  894. handleQueryList() {
  895. console.log('搜索按钮');
  896. },
  897. // 重置搜索
  898. handleResetList() {
  899. console.log('重置搜索');
  900. }
  901. }
  902. };
  903. </script>
  904. <style lang="less" scoped>
  905. @import "policy-management";
  906. </style>