BytedanceNameModelRuleModal.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  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="模板名称">
  16. <a-input placeholder="请输入模板名称" v-decorator="['name', validatorRules.name ]" />
  17. </a-form-item>
  18. <a-form-item
  19. :labelCol="labelCol"
  20. :wrapperCol="wrapperCol"
  21. label="生成规则">
  22. <a-input placeholder="请输入生成规则" v-decorator="['rule', validatorRules.rule ]" />
  23. <br>
  24. <a-button :size="size" @click="clickQd">渠道</a-button>
  25. <a-button :size="size" @click="clickSclx">素材类型</a-button>
  26. <a-button :size="size" @click="clickScmc">素材名称</a-button>
  27. <a-button :size="size" @click="clickRq">日期</a-button>
  28. </a-form-item>
  29. <a-form-item
  30. :labelCol="labelCol"
  31. :wrapperCol="wrapperCol"
  32. label="模板状态信息">
  33. <a-input-number v-decorator="[ 'status', validatorRules.status ]" />
  34. </a-form-item>
  35. </a-form>
  36. </a-spin>
  37. </a-modal>
  38. </template>
  39. <script>
  40. import { httpAction } from '@/api/manage'
  41. import pick from 'lodash.pick'
  42. import moment from "moment"
  43. export default {
  44. name: "BytedanceNameModelRuleModal",
  45. data () {
  46. return {
  47. size: 'large',
  48. title:"操作",
  49. visible: false,
  50. model: {},
  51. labelCol: {
  52. xs: { span: 24 },
  53. sm: { span: 5 },
  54. },
  55. wrapperCol: {
  56. xs: { span: 24 },
  57. sm: { span: 16 },
  58. },
  59. confirmLoading: false,
  60. form: this.$form.createForm(this),
  61. validatorRules:{
  62. name:{rules: [{ required: true, message: '请输入模板名称!' }]},
  63. rule:{rules: [{ required: true, message: '请输入生成规格!' }]},
  64. status:{rules: [{ required: true, message: '请输入模板状态信息!' }]},
  65. },
  66. url: {
  67. add: "/ctop/bytedanceNameModelRule/add",
  68. edit: "/ctop/bytedanceNameModelRule/edit",
  69. },
  70. }
  71. },
  72. created () {
  73. },
  74. methods: {
  75. clickQd(){
  76. this.form.setFieldsValue({
  77. "rule": this.form.getFieldValue("rule") +"{渠道号}"
  78. });
  79. },
  80. clickSclx(){
  81. this.form.setFieldsValue({
  82. "rule": this.form.getFieldValue("rule") +"{素材类型}"
  83. });
  84. },
  85. clickScmc(){
  86. this.form.setFieldsValue({
  87. "rule": this.form.getFieldValue("rule") +"{素材名称}"
  88. });
  89. },
  90. clickRq(){
  91. this.form.setFieldsValue({
  92. "rule": this.form.getFieldValue("rule") +"{日期}"
  93. });
  94. },
  95. add () {
  96. this.edit({});
  97. },
  98. edit (record) {
  99. this.form.resetFields();
  100. this.model = Object.assign({}, record);
  101. this.visible = true;
  102. this.$nextTick(() => {
  103. this.form.setFieldsValue(pick(this.model,'name','rule','status'))
  104. //时间格式化
  105. });
  106. },
  107. close () {
  108. this.$emit('close');
  109. this.visible = false;
  110. },
  111. handleOk () {
  112. const that = this;
  113. // 触发表单验证
  114. this.form.validateFields((err, values) => {
  115. if (!err) {
  116. that.confirmLoading = true;
  117. let httpurl = '';
  118. let method = '';
  119. if(!this.model.id){
  120. httpurl+=this.url.add;
  121. method = 'post';
  122. }else{
  123. httpurl+=this.url.edit;
  124. method = 'put';
  125. }
  126. let formData = Object.assign(this.model, values);
  127. //时间格式化
  128. console.log(formData)
  129. httpAction(httpurl,formData,method).then((res)=>{
  130. if(res.success){
  131. that.$message.success(res.message);
  132. that.$emit('ok');
  133. }else{
  134. that.$message.warning(res.message);
  135. }
  136. }).finally(() => {
  137. that.confirmLoading = false;
  138. that.close();
  139. })
  140. }
  141. })
  142. },
  143. handleCancel () {
  144. this.close()
  145. },
  146. }
  147. }
  148. </script>
  149. <style lang="less" scoped>
  150. </style>