CostModelXishuForm.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <template>
  2. <a-spin :spinning="confirmLoading">
  3. <j-form-container :disabled="formDisabled">
  4. <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
  5. <a-row>
  6. <a-col :span="24">
  7. <a-form-model-item label="成本类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="costName">
  8. <a-input v-model="model.costName" placeholder="请输入成本类型" ></a-input>
  9. </a-form-model-item>
  10. </a-col>
  11. <!-- <a-col :span="24">
  12. <a-form-model-item label="成本类型value" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="costValue">
  13. <a-input v-model="model.costValue" placeholder="请输入成本类型value" ></a-input>
  14. </a-form-model-item>
  15. </a-col> -->
  16. <a-col :span="24">
  17. <a-form-model-item label="系数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="xishu">
  18. <a-input-number
  19. v-model="model.xishu" :min="0" :step="1"
  20. :formatter="value => `${value}%`"
  21. :parser="value => value.replace('%', '')"
  22. style="width: 100%;"/>
  23. </a-form-model-item>
  24. </a-col>
  25. </a-row>
  26. </a-form-model>
  27. </j-form-container>
  28. </a-spin>
  29. </template>
  30. <script>
  31. import { httpAction, getAction } from '@/api/manage'
  32. import { validateDuplicateValue } from '@/utils/util'
  33. export default {
  34. name: 'CostModelXishuForm',
  35. components: {
  36. },
  37. props: {
  38. //表单禁用
  39. disabled: {
  40. type: Boolean,
  41. default: false,
  42. required: false
  43. }
  44. },
  45. data () {
  46. return {
  47. model:{
  48. },
  49. labelCol: {
  50. xs: { span: 24 },
  51. sm: { span: 5 },
  52. },
  53. wrapperCol: {
  54. xs: { span: 24 },
  55. sm: { span: 16 },
  56. },
  57. confirmLoading: false,
  58. validatorRules: {
  59. costName: [
  60. { required: true, message: '请输入成本类型!'},
  61. ],
  62. xishu: [
  63. { required: true, message: '请输入系数!'},
  64. ],
  65. },
  66. url: {
  67. add: "/costModelXishu/costModelXishu/add",
  68. edit: "/costModelXishu/costModelXishu/edit",
  69. queryById: "/costModelXishu/costModelXishu/queryById"
  70. },
  71. }
  72. },
  73. computed: {
  74. formDisabled(){
  75. return this.disabled
  76. },
  77. },
  78. created () {
  79. //备份model原始值
  80. this.modelDefault = JSON.parse(JSON.stringify(this.model));
  81. },
  82. methods: {
  83. add () {
  84. this.edit(this.modelDefault);
  85. },
  86. edit (record) {
  87. this.model = Object.assign({}, record);
  88. this.visible = true;
  89. },
  90. submitForm () {
  91. const that = this;
  92. // 触发表单验证
  93. this.$refs.form.validate(valid => {
  94. if (valid) {
  95. that.confirmLoading = true;
  96. let httpurl = '';
  97. let method = '';
  98. if(!this.model.id){
  99. httpurl+=this.url.add;
  100. method = 'post';
  101. }else{
  102. httpurl+=this.url.edit;
  103. method = 'put';
  104. }
  105. httpAction(httpurl,this.model,method).then((res)=>{
  106. if(res.success){
  107. that.$message.success(res.message);
  108. that.$emit('ok');
  109. }else{
  110. that.$message.warning(res.message);
  111. }
  112. }).finally(() => {
  113. that.confirmLoading = false;
  114. })
  115. }
  116. })
  117. },
  118. }
  119. }
  120. </script>