ElecfeeDegreeForm.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  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="部门ID" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="deptid">
  8. <j-select-depart v-model="model.deptid" :multi="true" />
  9. </a-form-model-item>
  10. </a-col>
  11. <a-col :span="24">
  12. <a-form-model-item label="计费类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="feetype">
  13. <j-dict-select-tag type="list" v-model="model.feetype" dictCode="elecfee_degree_feetype" placeholder="请选择计费类型" />
  14. </a-form-model-item>
  15. </a-col>
  16. <a-col :span="24">
  17. <a-form-model-item label="目录电价(元/kw)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="price">
  18. <a-input-number v-model="model.price" placeholder="请输入目录电价(元/kw)" style="width: 100%" />
  19. </a-form-model-item>
  20. </a-col>
  21. <a-col :span="24">
  22. <a-form-model-item label="开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="begintime">
  23. <j-date placeholder="请选择开始时间" v-model="model.begintime" style="width: 100%" />
  24. </a-form-model-item>
  25. </a-col>
  26. <a-col :span="24">
  27. <a-form-model-item label="结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="endtime">
  28. <j-date placeholder="请选择结束时间" v-model="model.endtime" style="width: 100%" />
  29. </a-form-model-item>
  30. </a-col>
  31. <a-col :span="24">
  32. <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
  33. <a-textarea v-model="model.remark" placeholder="请输入备注" rows="3" ></a-textarea>
  34. </a-form-model-item>
  35. </a-col>
  36. </a-row>
  37. </a-form-model>
  38. </j-form-container>
  39. </a-spin>
  40. </template>
  41. <script>
  42. import { httpAction, getAction } from '@/api/manage'
  43. import { validateDuplicateValue } from '@/utils/util'
  44. export default {
  45. name: 'ElecfeeDegreeForm',
  46. components: {
  47. },
  48. props: {
  49. //表单禁用
  50. disabled: {
  51. type: Boolean,
  52. default: false,
  53. required: false
  54. }
  55. },
  56. data () {
  57. return {
  58. model:{
  59. },
  60. labelCol: {
  61. xs: { span: 24 },
  62. sm: { span: 5 },
  63. },
  64. wrapperCol: {
  65. xs: { span: 24 },
  66. sm: { span: 16 },
  67. },
  68. confirmLoading: false,
  69. validatorRules: {
  70. elecfeedegreeid: [
  71. { required: true, message: '请输入电度电费ID!'},
  72. ],
  73. feetype: [
  74. { required: true, message: '请输入计费类型:售电、光伏!'},
  75. ],
  76. price: [
  77. { required: true, message: '请输入目录电价(元/kw)!'},
  78. ],
  79. begintime: [
  80. { required: true, message: '请输入开始时间!'},
  81. ],
  82. },
  83. url: {
  84. add: "/elecfeeDegree/elecfeeDegree/add",
  85. edit: "/elecfeeDegree/elecfeeDegree/edit",
  86. queryById: "/elecfeeDegree/elecfeeDegree/queryById"
  87. }
  88. }
  89. },
  90. computed: {
  91. formDisabled(){
  92. return this.disabled
  93. },
  94. },
  95. created () {
  96. //备份model原始值
  97. this.modelDefault = JSON.parse(JSON.stringify(this.model));
  98. },
  99. methods: {
  100. add () {
  101. this.edit(this.modelDefault);
  102. },
  103. edit (record) {
  104. this.model = Object.assign({}, record);
  105. this.visible = true;
  106. },
  107. submitForm () {
  108. const that = this;
  109. // 触发表单验证
  110. this.$refs.form.validate(valid => {
  111. if (valid) {
  112. that.confirmLoading = true;
  113. let httpurl = '';
  114. let method = '';
  115. if(!this.model.id){
  116. httpurl+=this.url.add;
  117. method = 'post';
  118. }else{
  119. httpurl+=this.url.edit;
  120. method = 'put';
  121. }
  122. httpAction(httpurl,this.model,method).then((res)=>{
  123. if(res.success){
  124. that.$message.success(res.message);
  125. that.$emit('ok');
  126. }else{
  127. that.$message.warning(res.message);
  128. }
  129. }).finally(() => {
  130. that.confirmLoading = false;
  131. })
  132. }
  133. })
  134. },
  135. }
  136. }
  137. </script>