ByteDanceBudgetTemplateModal.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. <template>
  2. <a-modal
  3. :title="title"
  4. :width="800"
  5. :visible="visible"
  6. :confirmLoading="confirmLoading"
  7. @ok="handleOk"
  8. @cancel="handleCancel"
  9. cancelText="关闭">
  10. <a-spin :spinning="confirmLoading">
  11. <a-form :form="form">
  12. <a-form-item
  13. :labelCol="labelCol"
  14. :wrapperCol="wrapperCol"
  15. label="广告主id">
  16. <a-input placeholder="请输入广告主id" v-decorator="['advertiserId', validatorRules.advertiserId ]"/>
  17. </a-form-item>
  18. <a-form-item
  19. :labelCol="labelCol"
  20. :wrapperCol="wrapperCol"
  21. label="头条账号id">
  22. <a-input placeholder="请输入头条账号id" v-decorator="['toutiaoId', validatorRules.toutiaoId ]"/>
  23. </a-form-item>
  24. <a-form-item
  25. :labelCol="labelCol"
  26. :wrapperCol="wrapperCol"
  27. label="bidType">
  28. <a-input placeholder="请输入bidType" v-decorator="['bidType', {}]"/>
  29. </a-form-item>
  30. <a-form-item
  31. :labelCol="labelCol"
  32. :wrapperCol="wrapperCol"
  33. label="flowControlMode">
  34. <a-input placeholder="请输入flowControlMode" v-decorator="['flowControlMode', {}]"/>
  35. </a-form-item>
  36. <a-form-item
  37. :labelCol="labelCol"
  38. :wrapperCol="wrapperCol"
  39. label="budgetPrice">
  40. <a-input placeholder="请输入budgetPrice" v-decorator="['budgetPrice', {}]"/>
  41. </a-form-item>
  42. <a-form-item
  43. :labelCol="labelCol"
  44. :wrapperCol="wrapperCol"
  45. label="budgetPriceMode">
  46. <a-input placeholder="请输入budgetPriceMode" v-decorator="['budgetPriceMode', {}]"/>
  47. </a-form-item>
  48. <a-form-item
  49. :labelCol="labelCol"
  50. :wrapperCol="wrapperCol"
  51. label="flowDateType">
  52. <a-input placeholder="请输入flowDateType" v-decorator="['flowDateType', {}]"/>
  53. </a-form-item>
  54. <a-form-item
  55. :labelCol="labelCol"
  56. :wrapperCol="wrapperCol"
  57. label="startDate">
  58. <a-input placeholder="请输入startDate" v-decorator="['startDate', {}]"/>
  59. </a-form-item>
  60. <a-form-item
  61. :labelCol="labelCol"
  62. :wrapperCol="wrapperCol"
  63. label="endDate">
  64. <a-input placeholder="请输入endDate" v-decorator="['endDate', {}]"/>
  65. </a-form-item>
  66. <a-form-item
  67. :labelCol="labelCol"
  68. :wrapperCol="wrapperCol"
  69. label="dateQuantum">
  70. <a-input placeholder="请输入dateQuantum" v-decorator="['dateQuantum', {}]"/>
  71. </a-form-item>
  72. <a-form-item
  73. :labelCol="labelCol"
  74. :wrapperCol="wrapperCol"
  75. label="dateQuantumRange">
  76. <a-input placeholder="请输入dateQuantumRange" v-decorator="['dateQuantumRange', {}]"/>
  77. </a-form-item>
  78. <a-form-item
  79. :labelCol="labelCol"
  80. :wrapperCol="wrapperCol"
  81. label="priceType">
  82. <a-input placeholder="请输入priceType" v-decorator="['priceType', {}]"/>
  83. </a-form-item>
  84. <a-form-item
  85. :labelCol="labelCol"
  86. :wrapperCol="wrapperCol"
  87. label="convertPrice">
  88. <a-input placeholder="请输入convertPrice" v-decorator="['convertPrice', {}]"/>
  89. </a-form-item>
  90. <a-form-item
  91. :labelCol="labelCol"
  92. :wrapperCol="wrapperCol"
  93. label="filterType">
  94. <a-input placeholder="请输入filterType" v-decorator="['filterType', {}]"/>
  95. </a-form-item>
  96. <a-form-item
  97. :labelCol="labelCol"
  98. :wrapperCol="wrapperCol"
  99. label="status">
  100. <a-input-number v-decorator="[ 'status', {}]"/>
  101. </a-form-item>
  102. </a-form>
  103. </a-spin>
  104. </a-modal>
  105. </template>
  106. <script>
  107. import {httpAction} from '@/api/manage'
  108. import pick from 'lodash.pick'
  109. import moment from "moment"
  110. export default {
  111. name: "ByteDanceBudgetTemplateModal",
  112. data() {
  113. return {
  114. title: "操作",
  115. visible: false,
  116. model: {},
  117. labelCol: {
  118. xs: {span: 24},
  119. sm: {span: 5},
  120. },
  121. wrapperCol: {
  122. xs: {span: 24},
  123. sm: {span: 16},
  124. },
  125. confirmLoading: false,
  126. form: this.$form.createForm(this),
  127. validatorRules: {
  128. advertiserId: {rules: [{required: true, message: '请输入广告主id!'}]},
  129. toutiaoId: {rules: [{required: true, message: '请输入头条账号id!'}]},
  130. },
  131. url: {
  132. add: "/ctop/byteDanceBudgetTemplate/add",
  133. edit: "/ctop/byteDanceBudgetTemplate/edit",
  134. },
  135. }
  136. },
  137. created() {
  138. },
  139. methods: {
  140. add() {
  141. this.edit({});
  142. },
  143. edit(record) {
  144. this.form.resetFields();
  145. this.model = Object.assign({}, record);
  146. this.visible = true;
  147. this.$nextTick(() => {
  148. this.form.setFieldsValue(pick(this.model, 'advertiserId', 'toutiaoId', 'bidType', 'flowControlMode', 'budgetPrice', 'budgetPriceMode', 'flowDateType', 'startDate', 'endDate', 'dateQuantum', 'dateQuantumRange', 'priceType', 'convertPrice', 'filterType', 'status'))
  149. //时间格式化
  150. });
  151. },
  152. close() {
  153. this.$emit('close');
  154. this.visible = false;
  155. },
  156. handleOk() {
  157. const that = this;
  158. // 触发表单验证
  159. this.form.validateFields((err, values) => {
  160. if (!err) {
  161. that.confirmLoading = true;
  162. let httpurl = '';
  163. let method = '';
  164. if (!this.model.id) {
  165. httpurl += this.url.add;
  166. method = 'post';
  167. } else {
  168. httpurl += this.url.edit;
  169. method = 'put';
  170. }
  171. let formData = Object.assign(this.model, values);
  172. //时间格式化
  173. console.log(formData)
  174. httpAction(httpurl, formData, method).then((res) => {
  175. if (res.success) {
  176. that.$message.success(res.message);
  177. that.$emit('ok');
  178. } else {
  179. that.$message.warning(res.message);
  180. }
  181. }).finally(() => {
  182. that.confirmLoading = false;
  183. that.close();
  184. })
  185. }
  186. })
  187. },
  188. handleCancel() {
  189. this.close()
  190. },
  191. }
  192. }
  193. </script>
  194. <style lang="less" scoped>
  195. </style>