PerformanceModal.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  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="sys_user的主键id">
  16. <a-input placeholder="请输入sys_user的主键id" v-decorator="['userId', validatorRules.userId ]" />
  17. </a-form-item>
  18. <a-form-item
  19. :labelCol="labelCol"
  20. :wrapperCol="wrapperCol"
  21. label="sys_role的主键id">
  22. <a-input placeholder="请输入sys_role的主键id" v-decorator="['roleId', {}]" />
  23. </a-form-item>
  24. <a-form-item
  25. :labelCol="labelCol"
  26. :wrapperCol="wrapperCol"
  27. label="年度">
  28. <a-input-number v-decorator="[ 'year', {}]" />
  29. </a-form-item>
  30. <a-form-item
  31. :labelCol="labelCol"
  32. :wrapperCol="wrapperCol"
  33. label="季度">
  34. <a-input-number v-decorator="[ 'quarter', {}]" />
  35. </a-form-item>
  36. <a-form-item
  37. :labelCol="labelCol"
  38. :wrapperCol="wrapperCol"
  39. label="绩效统计开始时间">
  40. <a-date-picker v-decorator="[ 'startTime', {}]" />
  41. </a-form-item>
  42. <a-form-item
  43. :labelCol="labelCol"
  44. :wrapperCol="wrapperCol"
  45. label="绩效统计结束时间">
  46. <a-date-picker v-decorator="[ 'endTime', {}]" />
  47. </a-form-item>
  48. <a-form-item
  49. :labelCol="labelCol"
  50. :wrapperCol="wrapperCol"
  51. label="总消耗(单位元)">
  52. <a-input-number v-decorator="[ 'totalCost', validatorRules.totalCost ]" />
  53. </a-form-item>
  54. <a-form-item
  55. :labelCol="labelCol"
  56. :wrapperCol="wrapperCol"
  57. label="总绩效(单位元)">
  58. <a-input-number v-decorator="[ 'totalPerformance', {}]" />
  59. </a-form-item>
  60. <a-form-item
  61. :labelCol="labelCol"
  62. :wrapperCol="wrapperCol"
  63. label="提点比例">
  64. <a-input-number v-decorator="[ 'commissionRate', {}]" />
  65. </a-form-item>
  66. <a-form-item
  67. :labelCol="labelCol"
  68. :wrapperCol="wrapperCol"
  69. label="角色提成比例">
  70. <a-input-number v-decorator="[ 'roleCommissionRate', {}]" />
  71. </a-form-item>
  72. <a-form-item
  73. :labelCol="labelCol"
  74. :wrapperCol="wrapperCol"
  75. label="视频有效率">
  76. <a-input-number v-decorator="[ 'videoEfficiency', {}]" />
  77. </a-form-item>
  78. <a-form-item
  79. :labelCol="labelCol"
  80. :wrapperCol="wrapperCol"
  81. label="1_快手2_抖音">
  82. <a-input-number v-decorator="[ 'appType', {}]" />
  83. </a-form-item>
  84. </a-form>
  85. </a-spin>
  86. </a-modal>
  87. </template>
  88. <script>
  89. import { httpAction } from '@/api/manage'
  90. import pick from 'lodash.pick'
  91. import moment from "moment"
  92. export default {
  93. name: "PerformanceModal",
  94. data () {
  95. return {
  96. title:"操作",
  97. visible: false,
  98. model: {},
  99. labelCol: {
  100. xs: { span: 24 },
  101. sm: { span: 5 },
  102. },
  103. wrapperCol: {
  104. xs: { span: 24 },
  105. sm: { span: 16 },
  106. },
  107. confirmLoading: false,
  108. form: this.$form.createForm(this),
  109. validatorRules:{
  110. userId:{rules: [{ required: true, message: '请输入sys_user的主键id!' }]},
  111. totalCost:{rules: [{ required: true, message: '请输入总消耗(单位元)!' }]},
  112. },
  113. url: {
  114. add: "/ctop/performance/add",
  115. edit: "/ctop/performance/edit",
  116. },
  117. }
  118. },
  119. created () {
  120. },
  121. methods: {
  122. add () {
  123. this.edit({});
  124. },
  125. edit (record) {
  126. this.form.resetFields();
  127. this.model = Object.assign({}, record);
  128. this.visible = true;
  129. this.$nextTick(() => {
  130. this.form.setFieldsValue(pick(this.model,'userId','roleId','year','quarter','totalCost','totalPerformance','commissionRate','roleCommissionRate','videoEfficiency','appType'))
  131. //时间格式化
  132. this.form.setFieldsValue({startTime:this.model.startTime?moment(this.model.startTime):null})
  133. this.form.setFieldsValue({endTime:this.model.endTime?moment(this.model.endTime):null})
  134. });
  135. },
  136. close () {
  137. this.$emit('close');
  138. this.visible = false;
  139. },
  140. handleOk () {
  141. const that = this;
  142. // 触发表单验证
  143. this.form.validateFields((err, values) => {
  144. if (!err) {
  145. that.confirmLoading = true;
  146. let httpurl = '';
  147. let method = '';
  148. if(!this.model.id){
  149. httpurl+=this.url.add;
  150. method = 'post';
  151. }else{
  152. httpurl+=this.url.edit;
  153. method = 'put';
  154. }
  155. let formData = Object.assign(this.model, values);
  156. //时间格式化
  157. formData.startTime = formData.startTime?formData.startTime.format():null;
  158. formData.endTime = formData.endTime?formData.endTime.format():null;
  159. console.log(formData)
  160. httpAction(httpurl,formData,method).then((res)=>{
  161. if(res.success){
  162. that.$message.success(res.message);
  163. that.$emit('ok');
  164. }else{
  165. that.$message.warning(res.message);
  166. }
  167. }).finally(() => {
  168. that.confirmLoading = false;
  169. that.close();
  170. })
  171. }
  172. })
  173. },
  174. handleCancel () {
  175. this.close()
  176. },
  177. }
  178. }
  179. </script>
  180. <style lang="less" scoped>
  181. </style>