|
|
@@ -19,18 +19,17 @@
|
|
|
ref="baseForm"
|
|
|
class="base-form"
|
|
|
label-position="right"
|
|
|
- label-width="125px"
|
|
|
+ label-width="100px"
|
|
|
:model="baseForm"
|
|
|
:rules="rules"
|
|
|
size="small"
|
|
|
>
|
|
|
<el-row>
|
|
|
<el-col :span="24">
|
|
|
- <el-form-item label="所属区域:">
|
|
|
+ <el-form-item label="所属区域">
|
|
|
<el-row>
|
|
|
<el-col :span="24">
|
|
|
<el-select style="width: 100%" placeholder="请选择您的行政区">
|
|
|
-
|
|
|
</el-select>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -40,125 +39,59 @@
|
|
|
<el-row>
|
|
|
<h3>水价</h3>
|
|
|
<el-col :span="24">
|
|
|
- <el-form-item label="水价计费方式:">
|
|
|
+ <el-form-item label="水价计费方式">
|
|
|
<el-row>
|
|
|
- <el-col :span="24">
|
|
|
- <el-radio v-model="radio" label="1">备选项</el-radio>
|
|
|
- <el-radio v-model="radio" label="2">备选项</el-radio>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="第1阶梯水价:">
|
|
|
- <el-row>
|
|
|
- <el-col :span="24">
|
|
|
- <el-row>
|
|
|
- <el-col :span="4">
|
|
|
- <el-input disabled/>
|
|
|
- </el-col>
|
|
|
- <el-col :span="2" style="display: flex;align-items:center">
|
|
|
- <div class="divider_center"></div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="4" style="display:flex;align-items:center">
|
|
|
- <el-input/>
|
|
|
- </el-col>
|
|
|
- <el-col :span="2">
|
|
|
- <span style="margin:0 10px;">吨</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8" style="display:flex">
|
|
|
- <el-input style="width: 50%;margin-right:10px;"/>元/吨
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="第2阶梯水价:">
|
|
|
- <el-row>
|
|
|
- <el-col :span="24">
|
|
|
- <el-row>
|
|
|
- <el-col :span="4">
|
|
|
- <el-input disabled/>
|
|
|
- </el-col>
|
|
|
- <el-col :span="2" style="display: flex;align-items:center">
|
|
|
- <div class="divider_center"></div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="4" style="display:flex;align-items:center">
|
|
|
- <el-input/>
|
|
|
- </el-col>
|
|
|
- <el-col :span="2">
|
|
|
- <span style="margin:0 10px;">吨</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8" style="display:flex">
|
|
|
- <el-input style="width: 50%;margin-right:10px;"/>元/吨
|
|
|
- </el-col>
|
|
|
- <el-col :span="2" v-if="!shouldShowThree">
|
|
|
- <span style="margin: 0 10px;">
|
|
|
- <i class="el-icon-delete-solid delete-icon"></i>
|
|
|
- </span>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <el-col :span="18">
|
|
|
+ <el-radio v-model="constantWaterPrice" label="1">恒定水价</el-radio>
|
|
|
+ <el-radio v-model="constantWaterPrice" label="2">阶梯水价</el-radio>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="第3阶梯水价:" v-if="shouldShowThree">
|
|
|
+ <el-form-item label="水价" v-if="constantWaterPrice == 1">
|
|
|
<el-row>
|
|
|
- <el-col :span="24">
|
|
|
- <el-row>
|
|
|
- <el-col :span="4">
|
|
|
- <el-input disabled/>
|
|
|
- </el-col>
|
|
|
- <el-col :span="2" style="display: flex;align-items:center">
|
|
|
- <div class="divider_center"></div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="4" style="display:flex;align-items:center">
|
|
|
- <el-input/>
|
|
|
- </el-col>
|
|
|
- <el-col :span="2">
|
|
|
- <span style="margin:0 10px;">吨</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8" style="display:flex">
|
|
|
- <el-input style="width: 50%;margin-right:10px;"/>元/吨
|
|
|
- </el-col>
|
|
|
- <el-col :span="2">
|
|
|
- <span style="margin: 0 10px;">
|
|
|
- <i class="el-icon-delete-solid delete-icon" @click="deleteIcon"></i>
|
|
|
- </span>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <el-col :span="18">
|
|
|
+ <el-input style="width: 50%" />
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-form-item>
|
|
|
- <div class="add" @click="handlerShowThree" v-if="!shouldShowThree">
|
|
|
- <i class="el-icon-circle-plus-outline add-icon"></i>
|
|
|
- 添加
|
|
|
- </div>
|
|
|
+ <ladderLikeWaterPrice
|
|
|
+ v-else
|
|
|
+ :type="'water'"
|
|
|
+ @addShow="addShowHandler"
|
|
|
+ :list="waterlist"
|
|
|
+ />
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
-
|
|
|
<el-row>
|
|
|
<h3>电价</h3>
|
|
|
<el-col :span="24">
|
|
|
- <el-form-item label="电价计费方式:">
|
|
|
+ <el-form-item label="电价计费方式">
|
|
|
<el-row>
|
|
|
<el-col :span="18">
|
|
|
- <el-radio v-model="radio" label="1">备选项</el-radio>
|
|
|
- <el-radio v-model="radio" label="2">备选项</el-radio>
|
|
|
+ <el-radio v-model="ladderLikeWaterPrice" label="1">恒定电价</el-radio>
|
|
|
+ <el-radio v-model="ladderLikeWaterPrice" label="2">阶梯电价</el-radio>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="电价(元/度):">
|
|
|
+ <el-form-item label="电价" v-if="ladderLikeWaterPrice == 1">
|
|
|
<el-row>
|
|
|
<el-col :span="18">
|
|
|
- <el-input style="width: 100%">
|
|
|
-
|
|
|
- </el-input>
|
|
|
+ <el-input style="width: 50%" />
|
|
|
+ <span style="display:inline-block;margin-left:5px">元/度</span>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-form-item>
|
|
|
+ <ladderLikeWaterPrice
|
|
|
+ v-else
|
|
|
+ :type="'electricity'"
|
|
|
+ @addShow="addShowHandler"
|
|
|
+ :list="electricitylist"
|
|
|
+ />
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-form>
|
|
|
|
|
|
- <div style="text-align: right">
|
|
|
+ <div style="text-align: right;margin-top: 20px;">
|
|
|
<el-button type="info" plain @click="resetForm('baseForm')"
|
|
|
>取消</el-button
|
|
|
>
|
|
|
@@ -175,6 +108,7 @@
|
|
|
|
|
|
<script>
|
|
|
import { assign } from 'lodash-es';
|
|
|
+import ladderLikeWaterPrice from './ladderLikeWaterPrice.vue'
|
|
|
export default {
|
|
|
name: 'setAnnualWaterRight',
|
|
|
props: {
|
|
|
@@ -188,20 +122,38 @@ export default {
|
|
|
default: false
|
|
|
}
|
|
|
},
|
|
|
+ components: {
|
|
|
+ ladderLikeWaterPrice
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
- shouldShowThree: false,
|
|
|
dialogSubmitLoading: false,
|
|
|
+ waterlist: [{
|
|
|
+ serial:1,
|
|
|
+ label: '第1阶梯水价',
|
|
|
+ isCanDelete: false,
|
|
|
+ },{
|
|
|
+ serial:2,
|
|
|
+ label: '第2阶梯水价',
|
|
|
+ isCanDelete: false,
|
|
|
+ }],
|
|
|
+ electricitylist: [{
|
|
|
+ serial:1,
|
|
|
+ label: '第1阶梯电价',
|
|
|
+ isCanDelete: false,
|
|
|
+ },{
|
|
|
+ serial:2,
|
|
|
+ label: '第2阶梯电价',
|
|
|
+ isCanDelete: false,
|
|
|
+ }],
|
|
|
+ constantWaterPrice:'2',
|
|
|
+ ladderLikeWaterPrice:'1',
|
|
|
dialogVisible: false,
|
|
|
baseForm: {
|
|
|
- productValue: '',
|
|
|
productName: '',
|
|
|
stockAmount: '',
|
|
|
- goodsUnit: '',
|
|
|
goodsSpecValue: '',
|
|
|
- imageArr1: [],
|
|
|
supplierId: '',
|
|
|
- imageArr2: []
|
|
|
},
|
|
|
hasFetched: false,
|
|
|
rules: {
|
|
|
@@ -243,16 +195,22 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- deleteIcon(){
|
|
|
- this.shouldShowThree = false
|
|
|
- },
|
|
|
- // 关闭第三阶梯
|
|
|
- handlerHideThree() {
|
|
|
- this.shouldShowThree = false
|
|
|
- },
|
|
|
- // 打开第三阶梯
|
|
|
- handlerShowThree() {
|
|
|
- this.shouldShowThree = true
|
|
|
+ addShowHandler(type) {
|
|
|
+ if(type === 'water') {
|
|
|
+ this.waterlist.push({
|
|
|
+ serial:3,
|
|
|
+ label: '第3阶梯水价',
|
|
|
+ isCanDelete: true,
|
|
|
+ isShow: true
|
|
|
+ })
|
|
|
+ }else {
|
|
|
+ this.electricitylist.push({
|
|
|
+ serial:3,
|
|
|
+ label: '第3阶梯电价',
|
|
|
+ isCanDelete: true,
|
|
|
+ isShow: true
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
resetForm(formName) {
|
|
|
this.$refs[formName].resetFields();
|
|
|
@@ -267,7 +225,6 @@ export default {
|
|
|
console.log(valid)
|
|
|
})
|
|
|
},
|
|
|
-
|
|
|
handleClose() {
|
|
|
this.$emit('update:visible', false);
|
|
|
this.resetForm('baseForm');
|
|
|
@@ -278,42 +235,9 @@ export default {
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
::v-deep .el-form-item__label{
|
|
|
- text-align: left !important;
|
|
|
-}
|
|
|
-::v-deep .el-tooltip__popper.is-dark {
|
|
|
- background: #eeeeee;
|
|
|
+ text-align: right !important;
|
|
|
}
|
|
|
|
|
|
-::v-deep .el-popper.is-customized .el-popper__arrow::before {
|
|
|
- background: #eeeeee;
|
|
|
-}
|
|
|
-.add{
|
|
|
- width: 100%;
|
|
|
- height: 32px;
|
|
|
- line-height: 32px;
|
|
|
- text-align: center;
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid #14A478;
|
|
|
- color:#14A478;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- font-size: 14px;
|
|
|
- cursor: pointer;
|
|
|
- .add-icon{
|
|
|
- font-size: 16px;
|
|
|
- margin-right:2px;
|
|
|
- }
|
|
|
-}
|
|
|
-.delete-icon{
|
|
|
- font-size: 24px;
|
|
|
- color:#FF5951;
|
|
|
- margin-top:5px;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-.input-number {
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
.item_tooltip{
|
|
|
position: absolute;
|
|
|
top: 25px;
|
|
|
@@ -328,13 +252,6 @@ h3{
|
|
|
font-weight: 700;
|
|
|
line-height: 24px;
|
|
|
}
|
|
|
-.divider_center{
|
|
|
- width:100%;
|
|
|
- height: 1px;
|
|
|
- margin-top:16px;
|
|
|
- margin: 16px 15px 0 15px;
|
|
|
- background: #DCDFE6;
|
|
|
-}
|
|
|
.base-form {
|
|
|
max-height: 70vh;
|
|
|
overflow-y: auto;
|
|
|
@@ -347,3 +264,15 @@ h3{
|
|
|
border-bottom: 1px solid #ebeef5;
|
|
|
}
|
|
|
</style>
|
|
|
+<style>
|
|
|
+.el-tooltip__popper.is-dark {
|
|
|
+ background: rgba(0,0,0,0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.el-tooltip__popper[x-placement^=right] .popper__arrow{
|
|
|
+ border-right-color:#888;
|
|
|
+}
|
|
|
+.el-tooltip__popper[x-placement^=right] .popper__arrow::after{
|
|
|
+ border-right-color:#888;
|
|
|
+}
|
|
|
+</style>
|