能源费率原版本

src/views/module_base/energyRate/modules/EnergyRateFormYuan.vue

@@ -0,0 +1,271 @@
+<template>
+   <a-spin :spinning="confirmLoading">
+     <j-form-container :disabled="formDisabled">
+       <!-- 主表单区域 -->
+       <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
+         <div class="cmms-dialog-item-title">基本信息</div>
+         <a-row>
+          <a-col :xs="24" :sm="12">
+            <a-form-model-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
+              <a-input v-model="model.name" placeholder="请输入名称" ></a-input>
+            </a-form-model-item>
+          </a-col>
+          <a-col :xs="24" :sm="12">
+            <a-form-model-item label="能源分类" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="energytypeid">
+              <j-search-select-tag v-model="model.energytypeid" placeholder="请选择设备" dict="base_energy_type,name,id"  />
+            </a-form-model-item>
+          </a-col>
+          <a-col :xs="24" :sm="12">
+            <a-form-model-item label="费率类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ratetype">
+              <j-dict-select-tag type="list" v-model="model.ratetype" dictCode="energy_rate_type" placeholder="请选择费率类型" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :xs="24" :sm="12">
+            <a-form-model-item label="单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="rateunit">
+              <a-input v-model="model.rateunit" placeholder="请输入单位" ></a-input>
+            </a-form-model-item>
+          </a-col>
+          <a-col :xs="24" :sm="12">
+            <a-form-model-item label="费率有效期开始" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="begintime">
+              <j-date placeholder="请选择费率有效期开始" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" v-model="model.begintime" style="width: 100%" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :xs="24" :sm="12">
+            <a-form-model-item label="费率有效期结束" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="endtime">
+              <j-date placeholder="请选择费率有效期结束" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" v-model="model.endtime" style="width: 100%" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :xs="24" :sm="24">
+            <a-form-model-item label="备注" :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="remark">
+              <a-textarea v-model="model.remark" placeholder="请输入备注" rows="3" ></a-textarea>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+      </a-form-model>
+     </j-form-container>
+      <!-- 子表单区域 -->
+      <a-tabs v-model="activeKey" @change="handleChangeTabs">
+        <a-tab-pane tab="详情" :key="refKeys[0]" :forceRender="true">
+          <j-editable-table
+            :ref="refKeys[0]"
+            :loading="baseEnergyRateDetailTable.loading"
+            :columns="baseEnergyRateDetailTable.columns"
+            :dataSource="baseEnergyRateDetailTable.dataSource"
+            :maxHeight="300"
+            :disabled="formDisabled"
+            :rowNumber="true"
+            :rowSelection="true"
+            :actionButton="true"/>
+        </a-tab-pane>
+      </a-tabs>
+    </a-spin>
+</template>
+
+<script>
+
+  import { FormTypes,getRefPromise,VALIDATE_NO_PASSED } from '@/utils/JEditableTableUtil'
+  import { JEditableTableModelMixin } from '@/mixins/JEditableTableModelMixin'
+  import { validateDuplicateValue } from '@/utils/util'
+
+  export default {
+    name: 'EnergyRateForm',
+    mixins: [JEditableTableModelMixin],
+    components: {
+    },
+    data() {
+      return {
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 6 },
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 16 },
+        },
+        labelCol2: {
+          xs: { span: 24 },
+          sm: { span: 3 },
+        },
+        wrapperCol2: {
+          xs: { span: 24 },
+          sm: { span: 20 },
+        },
+        model:{
+        },
+        validatorRules: {
+           energyrateid: [
+              { required: true, message: '请输入能源费率ID!'},
+           ],
+           name: [
+              { required: true, message: '请输入名称!'},
+           ],
+           energytypeid: [
+              { required: true, message: '请输入能源分类ID!'},
+           ],
+           ratetype: [
+              { required: true, message: '请输入费率类型：分时费率、阶梯费率!'},
+           ],
+           rateunit: [
+              { required: true, message: '请输入单位!'},
+           ],
+           begintime: [
+              { required: true, message: '请输入费率有效期开始!'},
+           ],
+           endtime: [
+              { required: true, message: '请输入费率有效期结束!'},
+           ],
+        },
+        // 新增时子表默认添加几行空数据
+        addDefaultRowNum: 1,
+        refKeys: ['baseEnergyRateDetail', ],
+        tableKeys:['baseEnergyRateDetail', ],
+        activeKey: 'baseEnergyRateDetail',
+        // base_energy_rate_detail
+        baseEnergyRateDetailTable: {
+          loading: false,
+          dataSource: [],
+          columns: [
+            {
+              title: '分时开始时间',
+              key: 'begintime',
+              type: FormTypes.time,
+              width:"200px",
+              placeholder: '请输入${title}',
+              defaultValue:'',
+              validateRules: [{ required: true, message: '${title}不能为空' }],
+            },
+            {
+              title: '分时结束时间',
+              key: 'endtime',
+              type: FormTypes.time,
+              width:"200px",
+              placeholder: '请输入${title}',
+              defaultValue:'',
+            },
+            {
+              title: '峰平谷',
+              key: 'pandv',
+              type: FormTypes.select,
+              width:"200px",
+              placeholder: '请选择${title}',
+              defaultValue: '',
+              validateRules: [{ required: true, message: '${title}不能为空' }],
+              options: [
+                {text:'尖',value:'尖',disabled: false},
+                {text:'峰',value:'峰',disabled: false},
+                {text:'谷',value:'谷',disabled: false},
+                {text:'平',value:'平',disabled: false}
+              ]
+            },
+            {
+              title: '价格',
+              key: 'price',
+              type: FormTypes.input,
+              width:"200px",
+              placeholder: '请输入${title}',
+              defaultValue:'',
+              validateRules: [{ required: true, message: '${title}不能为空' }],
+            },
+            {
+              title: '起始量',
+              key: 'beginamount',
+              type: FormTypes.input,
+              width:"200px",
+              placeholder: '请输入${title}',
+              defaultValue:'',
+              validateRules: [{ required: true, message: '${title}不能为空' }],
+            },
+            {
+              title: '结束量',
+              key: 'endamount',
+              type: FormTypes.input,
+              width:"200px",
+              placeholder: '请输入${title}',
+              defaultValue:'',
+              // validateRules: [{ required: true, message: '${title}不能为空' }],
+            },
+          ]
+        },
+        url: {
+          add: "/energyRate/energyRate/add",
+          edit: "/energyRate/energyRate/edit",
+          baseEnergyRateDetail: {
+            list: '/energyRate/energyRate/queryDetailByMainId'
+          },
+        }
+      }
+    },
+    props: {
+      //表单禁用
+      disabled: {
+        type: Boolean,
+        default: false,
+        required: false
+      }
+    },
+    computed: {
+      formDisabled(){
+        return this.disabled
+      },
+    },
+    created () {
+    },
+    methods: {
+     addBefore(){
+            this.baseEnergyRateDetailTable.dataSource=[]
+      },
+      getAllTable() {
+        let values = this.tableKeys.map(key => getRefPromise(this, key))
+        return Promise.all(values)
+      },
+      /** 调用完edit()方法之后会自动调用此方法 */
+      editAfter() {
+        this.$nextTick(() => {
+        })
+        // 加载子表数据
+        if (this.model.id) {
+          let params = { id: this.model.id }
+          this.requestSubTableData(this.url.baseEnergyRateDetail.list, params, this.baseEnergyRateDetailTable)
+        }
+      },
+      //校验所有一对一子表表单
+    validateSubForm(allValues){
+        return new Promise((resolve,reject)=>{
+          Promise.all([
+          ]).then(() => {
+            resolve(allValues)
+          }).catch(e => {
+            if (e.error === VALIDATE_NO_PASSED) {
+              // 如果有未通过表单验证的子表，就自动跳转到它所在的tab
+              this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index]
+            } else {
+              console.error(e)
+            }
+          })
+        })
+    },
+      /** 整理成formData */
+      classifyIntoFormData(allValues) {
+        let main = Object.assign(this.model, allValues.formValue)
+
+        return {
+          ...main, // 展开
+          baseEnergyRateDetailList: allValues.tablesValue[0].values,
+        }
+      },
+      validateError(msg){
+        this.$message.error(msg)
+      },
+     close() {
+        this.visible = false
+        this.$emit('close')
+        this.$refs.form.clearValidate();
+      },
+
+    }
+  }
+</script>
+
+<style scoped>
+@import "~@/assets/less/uStyle.less";
+</style>