|
|
@@ -0,0 +1,408 @@
|
|
|
+<template>
|
|
|
+ <div class="dialog-content">
|
|
|
+ <!-- 基础信息 -->
|
|
|
+ <div class="section-title">
|
|
|
+ <span class="title-text">基础信息</span>
|
|
|
+ </div>
|
|
|
+ <el-form
|
|
|
+ ref="formRef"
|
|
|
+ :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="140px"
|
|
|
+ size="small"
|
|
|
+ class="base-form"
|
|
|
+ >
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="用能分类:" prop="energyClassificationName">
|
|
|
+ <el-input
|
|
|
+ v-model="form.energyClassificationName"
|
|
|
+ placeholder=" "
|
|
|
+ disabled
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="能源名称:" prop="energyTypeName">
|
|
|
+ <el-input
|
|
|
+ v-model="form.energyTypeName"
|
|
|
+ placeholder=" "
|
|
|
+ disabled
|
|
|
+ readonly
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="方案编码:" prop="code">
|
|
|
+ <el-input v-model="form.code" placeholder=" " disabled clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="方案名称:" prop="name">
|
|
|
+ <el-input
|
|
|
+ v-model="form.name"
|
|
|
+ placeholder="请输入"
|
|
|
+ disabled
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="费率类型:" prop="schemeType">
|
|
|
+ <el-select
|
|
|
+ v-model="form.schemeType"
|
|
|
+ placeholder="请选择"
|
|
|
+ disabled
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option label="单一费率" :value="1" />
|
|
|
+ <el-option label="分时费率" :value="2" />
|
|
|
+ <el-option label="阶段费率" :value="3" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="生效日期:" prop="effectiveDate">
|
|
|
+ <el-date-picker
|
|
|
+ disabled
|
|
|
+ v-model="form.effectiveDate"
|
|
|
+ type="date"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="价格单位:" prop="priceUnit">
|
|
|
+ <el-select
|
|
|
+ v-model="form.priceUnit"
|
|
|
+ placeholder="请选择"
|
|
|
+ disabled
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ v-for="item in energyConsumingUnitList.find(
|
|
|
+ (val) => val.value == form.energyClassificationCode
|
|
|
+ )?.priceUnit"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="状态:" prop="status">
|
|
|
+ <el-switch
|
|
|
+ v-model="form.status"
|
|
|
+ :active-value="1"
|
|
|
+ disabled
|
|
|
+ :inactive-value="0"
|
|
|
+ active-color="#409EFF"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="备注:">
|
|
|
+ <el-input
|
|
|
+ v-model="form.remark"
|
|
|
+ type="textarea"
|
|
|
+ disabled
|
|
|
+ :rows="2"
|
|
|
+ placeholder=" "
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- 价格方案 -->
|
|
|
+ <div class="section-title">
|
|
|
+ <span class="title-text">价格方案</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="price-table-wrapper" v-if="form.schemeType == 3">
|
|
|
+ <el-table :data="form.detailList" border size="small" style="width: 100%">
|
|
|
+ <el-table-column type="index" label="序号" width="60" align="center" />
|
|
|
+ <el-table-column prop="gradientLevel" label="梯度级别" align="center">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-select
|
|
|
+ v-model="row.gradientLevel"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 100%"
|
|
|
+ size="small"
|
|
|
+ disabled
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ v-for="item in [
|
|
|
+ { label: '第一档', value: 1 },
|
|
|
+ { label: '第二档', value: 2 },
|
|
|
+ { label: '第三档', value: 3 },
|
|
|
+ { label: '第四档', value: 4 }
|
|
|
+ ]"
|
|
|
+ :key="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="minimumAnnualUsage"
|
|
|
+ label="年用量下限"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-input
|
|
|
+ v-model="row.minimumAnnualUsage"
|
|
|
+ type="number"
|
|
|
+ style="width: 100%"
|
|
|
+ disabled
|
|
|
+ >
|
|
|
+ <template slot="append">{{
|
|
|
+ energyConsumingUnitList
|
|
|
+ .find((val) => val.value == form.energyClassificationCode)
|
|
|
+ ?.unit.find((val) => val.value == form.energyUnit)?.label
|
|
|
+ }}</template>
|
|
|
+ </el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="annualUsageLimit"
|
|
|
+ label="年用量上限"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-input
|
|
|
+ v-model="row.annualUsageLimit"
|
|
|
+ type="number"
|
|
|
+ style="width: 100%"
|
|
|
+ disabled
|
|
|
+ >
|
|
|
+ <template slot="append">{{
|
|
|
+ energyConsumingUnitList
|
|
|
+ .find((val) => val.value == form.energyClassificationCode)
|
|
|
+ ?.unit.find((val) => val.value == form.energyUnit)?.label
|
|
|
+ }}</template>
|
|
|
+ </el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="price" label="单价" align="center">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-input
|
|
|
+ v-model="row.price"
|
|
|
+ type="number"
|
|
|
+ style="width: 100%"
|
|
|
+ disabled
|
|
|
+ >
|
|
|
+ <template slot="append">{{
|
|
|
+ energyConsumingUnitList
|
|
|
+ .find((val) => val.value == form.energyClassificationCode)
|
|
|
+ ?.priceUnit.find((val) => val.value == form.priceUnit)?.label
|
|
|
+ }}</template>
|
|
|
+ </el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="price-table-wrapper" v-else>
|
|
|
+ <el-table :data="form.detailList" border size="small" style="width: 100%">
|
|
|
+ <el-table-column type="index" label="序号" width="60" align="center" />
|
|
|
+ <el-table-column prop="priceType" label="时段" align="center">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-select
|
|
|
+ v-model="row.priceType"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 100%"
|
|
|
+ size="small"
|
|
|
+ disabled
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ v-for="item in filteredPriceTypeList"
|
|
|
+ :key="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="timeRange" label="时段范围" align="center">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-time-picker
|
|
|
+ v-model="row.timeStart"
|
|
|
+ placeholder="开始"
|
|
|
+ value-format="HH:mm:ss"
|
|
|
+ format="HH:mm:ss"
|
|
|
+ size="small"
|
|
|
+ style="width: 40%"
|
|
|
+ disabled
|
|
|
+ />
|
|
|
+ <span style="margin: 0 5px">至</span>
|
|
|
+ <el-time-picker
|
|
|
+ v-model="row.timeEnd"
|
|
|
+ placeholder="结束"
|
|
|
+ value-format="HH:mm:ss"
|
|
|
+ format="HH:mm:ss"
|
|
|
+ size="small"
|
|
|
+ style="width: 40%"
|
|
|
+ disabled
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="price" label="单价" align="center">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-input
|
|
|
+ v-model="row.price"
|
|
|
+ type="number"
|
|
|
+ style="width: 100%"
|
|
|
+ disabled
|
|
|
+ >
|
|
|
+ <template slot="append">{{
|
|
|
+ energyConsumingUnitList
|
|
|
+ .find((val) => val.value == form.energyClassificationCode)
|
|
|
+ ?.priceUnit.find((val) => val.value == form.priceUnit)?.label
|
|
|
+ }}</template>
|
|
|
+ </el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { energyConsumingUnitList, priceTypeList } from '@/enum/dict.js';
|
|
|
+ import { getById } from '@/api/bpm/components/EnergyPricingScheme/index.js';
|
|
|
+ const defForm = {
|
|
|
+ energyClassificationCode: '',
|
|
|
+ energyClassificationName: '',
|
|
|
+ energyTypeName: '',
|
|
|
+ energyTypeId: '',
|
|
|
+ code: '',
|
|
|
+ name: '',
|
|
|
+ schemeType: '',
|
|
|
+ effectiveDate: '',
|
|
|
+ energyUnit: '',
|
|
|
+ status: 1,
|
|
|
+ remark: ''
|
|
|
+ };
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ energyConsumingUnitList,
|
|
|
+ priceTypeList,
|
|
|
+
|
|
|
+ form: {
|
|
|
+ ...defForm
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ energyClassificationCode: [
|
|
|
+ { required: true, message: '请选择用能分类', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ energyTypeName: [
|
|
|
+ { required: true, message: '请选择能源名称', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ name: [
|
|
|
+ { required: true, message: '请输入方案名称', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ schemeType: [
|
|
|
+ { required: true, message: '请选择费率类型', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ effectiveDate: [
|
|
|
+ { required: true, message: '请选择生效日期', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ priceUnit: [
|
|
|
+ { required: true, message: '请选择价格单位', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ status: [{ required: true, message: '请选择状态', trigger: 'change' }]
|
|
|
+ },
|
|
|
+ priceList: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ businessId: {
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 是否是单一费率
|
|
|
+ isSingleRate() {
|
|
|
+ return this.form.schemeType == 1;
|
|
|
+ },
|
|
|
+ // 是否是分时费率(峰谷费率)
|
|
|
+ isTimeOfUseRate() {
|
|
|
+ return this.form.schemeType == 2;
|
|
|
+ },
|
|
|
+ // 根据费率类型过滤时段列表(阶梯费率时过滤掉全时段)
|
|
|
+ filteredPriceTypeList() {
|
|
|
+ if (this.isSingleRate) {
|
|
|
+ return this.priceTypeList;
|
|
|
+ }
|
|
|
+ return this.priceTypeList.filter((item) => item.value != '0');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 打开弹窗
|
|
|
+ async init() {
|
|
|
+ this.form = await getById(this.businessId);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .dialog-content {
|
|
|
+ .section-title {
|
|
|
+ padding: 10px 0;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ border-bottom: 1px solid #409eff;
|
|
|
+
|
|
|
+ .title-text {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .base-form {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-header {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-table-wrapper {
|
|
|
+ ::v-deep .el-table {
|
|
|
+ .el-input {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-time-picker {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-form-item__label {
|
|
|
+ color: #606266;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|