<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
width="920px"
|
@confirm="confirm"
|
@close="onClose"
|
>
|
<el-form
|
v-loading="detailLoading"
|
:model="form"
|
ref="form"
|
:rules="rules"
|
label-width="150px"
|
class="electrical-param-form"
|
>
|
<el-form-item label="配置名称" prop="name">
|
<el-input
|
v-model="form.name"
|
class="param-input"
|
maxlength="100"
|
placeholder="请输入配置名称"
|
clearable
|
v-trim
|
/>
|
</el-form-item>
|
|
<el-form-item label="透支金额" prop="tzMoney">
|
<div class="param-field">
|
<div class="param-field__row">
|
<el-input-number
|
v-model="form.tzMoney"
|
class="param-input-number param-input-number--wide"
|
:min="0"
|
:max="190000"
|
:precision="2"
|
controls-position="right"
|
placeholder="0 - 190000"
|
/>
|
<span class="param-field__unit">元</span>
|
</div>
|
<p class="param-field__tip">电表最大可<span class="param-tip-highlight">透支</span>金额，设置后允许负数剩余金额</p>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="一级报警金额" prop="yjbjMoney">
|
<div class="param-field">
|
<div class="param-field__row">
|
<el-input-number
|
v-model="form.yjbjMoney"
|
class="param-input-number"
|
:min="0"
|
:precision="2"
|
controls-position="right"
|
placeholder="0"
|
/>
|
<span class="param-field__unit">元</span>
|
</div>
|
<p class="param-field__tip">低于设置值屏幕显示提示</p>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="二级报警金额" prop="ejbjMoney">
|
<div class="param-field">
|
<div class="param-field__row">
|
<el-input-number
|
v-model="form.ejbjMoney"
|
class="param-input-number"
|
:min="0"
|
:precision="2"
|
controls-position="right"
|
placeholder="0"
|
/>
|
<span class="param-field__unit">元</span>
|
</div>
|
<p class="param-field__tip">低于设置值闪灯光报警提示</p>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="负荷限制功率" prop="limitFhgl">
|
<div class="param-field">
|
<div class="param-field__row">
|
<el-input-number
|
v-model="form.limitFhgl"
|
class="param-input-number"
|
:min="0"
|
:max="80"
|
:precision="4"
|
controls-position="right"
|
placeholder="0 - 80"
|
/>
|
<span class="param-field__unit param-field__unit--suffix">(4位小数) KW</span>
|
</div>
|
<div class="param-field__info">
|
<p class="param-field__info-title">各种规格表最大可设置的功率：</p>
|
<ul class="param-field__info-list">
|
<li>
|
<strong>单相表</strong>：按规格最大安培数 × 电压。例如 10(40)A 表可设置最大功率为 40A × 220V = <em>8.8KW</em>
|
</li>
|
<li>
|
<strong>三相表</strong>：按最大规格电流 × 220V × 3。例如 10(40)A 表可设置最大功率为 40A × 220V × 3 = <em>26.4KW</em>
|
</li>
|
<li>
|
<strong>三相互感式表</strong>：无需再乘互感比。例如支持最大电流 5A，可设置最大功率为 5A × 220V × 3 = <em>3.3KW</em>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="超负荷延时间" prop="limitFhTime">
|
<div class="param-field__row">
|
<el-input-number
|
v-model="form.limitFhTime"
|
class="param-input-number"
|
:min="0"
|
:max="99"
|
:precision="0"
|
controls-position="right"
|
placeholder="0 - 99"
|
/>
|
<span class="param-field__unit">分钟</span>
|
</div>
|
</el-form-item>
|
|
<!-- 电价：APP 展示为计算结果，非必填输入 -->
|
<el-form-item label="电价" class="price-section">
|
<template slot="label">
|
<span>电价</span>
|
<el-tooltip content="电价 = 基础价 + 附加单价，保存后写入参数档案" placement="top">
|
<i class="el-icon-question price-section__help"/>
|
</el-tooltip>
|
</template>
|
<div class="param-field">
|
<div class="price-display">
|
<span class="price-display__value">{{ displayPriceText }}</span>
|
<span class="param-field__unit param-field__unit--suffix">(4位小数) 元/KWH</span>
|
<span class="price-display__tag">APP端展示电价</span>
|
</div>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="" prop="extraPrice" class="price-formula-item">
|
<div class="price-formula">
|
<span class="price-formula__eq">= 基础价*</span>
|
<el-input-number
|
v-model="form.basePrice"
|
class="param-input-number param-input-number--formula"
|
:min="0"
|
:precision="4"
|
controls-position="right"
|
placeholder="0"
|
@change="onPricePartChange"
|
/>
|
<span class="price-formula__unit">元/KWH + 附加单价*</span>
|
<el-input-number
|
v-model="form.extraPrice"
|
class="param-input-number param-input-number--formula"
|
:min="0"
|
:precision="4"
|
controls-position="right"
|
placeholder="0"
|
@change="onPricePartChange"
|
/>
|
<span class="price-formula__unit">元/KWH</span>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="附加价格组成说明" prop="remark">
|
<el-input
|
v-model="form.remark"
|
class="param-textarea"
|
type="textarea"
|
:rows="4"
|
maxlength="500"
|
placeholder="附加价格组成说明"
|
/>
|
</el-form-item>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import * as paramApi from '@/api/business/ywelectricalparam'
|
|
const numRequired = (label) => [
|
{
|
validator (rule, value, callback) {
|
if (value === undefined || value === null || value === '') {
|
callback(new Error('请填写' + label))
|
} else {
|
callback()
|
}
|
},
|
trigger: ['blur', 'change']
|
}
|
]
|
|
const PARAM_FORM_DEFAULTS = {
|
id: null,
|
name: '',
|
tzMoney: 0,
|
yjbjMoney: 0,
|
ejbjMoney: 0,
|
limitFhgl: 0,
|
limitFhTime: 0,
|
basePrice: 1,
|
extraPrice: 0,
|
price: 1,
|
status: 0,
|
remark: ''
|
}
|
|
const PARAM_NUMERIC_KEYS = ['tzMoney', 'yjbjMoney', 'ejbjMoney', 'limitFhgl', 'limitFhTime', 'basePrice', 'extraPrice', 'price']
|
|
const hasValue = (v) => v !== null && v !== undefined && v !== ''
|
|
const toNumber = (v) => {
|
if (!hasValue(v)) return null
|
const n = Number(v)
|
return isNaN(n) ? null : n
|
}
|
|
export default {
|
name: 'YwElectricalParamEdit',
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data () {
|
return {
|
title: '',
|
visible: false,
|
api: paramApi,
|
configData: {
|
'field.id': 'id'
|
},
|
isWorking: false,
|
detailLoading: false,
|
form: { ...PARAM_FORM_DEFAULTS },
|
rules: {
|
name: [{ required: true, message: '请输入参数设置名称', trigger: 'blur' }],
|
tzMoney: numRequired('透支金额'),
|
yjbjMoney: numRequired('一级报警金额'),
|
ejbjMoney: numRequired('二级报警金额'),
|
limitFhgl: numRequired('负荷限制功率'),
|
limitFhTime: numRequired('超负荷延时间')
|
}
|
}
|
},
|
computed: {
|
displayPrice () {
|
const base = Number(this.form.basePrice)
|
const extra = Number(this.form.extraPrice)
|
if (isNaN(base) || isNaN(extra)) {
|
return ''
|
}
|
return (base + extra).toFixed(4)
|
},
|
displayPriceText () {
|
return this.displayPrice === '' ? '-' : this.displayPrice
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/ywelectricalparam',
|
'field.id': 'id'
|
})
|
if (!this.api) {
|
this.api = paramApi
|
}
|
this.$set(this.rules, 'extraPrice', [{ validator: this.validatePriceParts, trigger: ['blur', 'change'] }])
|
},
|
methods: {
|
/** 将列表行/接口数据映射为表单（编辑时保留原始业务值） */
|
mapApiToForm (raw, { isNew = false } = {}) {
|
if (isNew || raw == null) {
|
return { ...PARAM_FORM_DEFAULTS }
|
}
|
const merged = { ...PARAM_FORM_DEFAULTS }
|
Object.keys(PARAM_FORM_DEFAULTS).forEach((key) => {
|
if (Object.prototype.hasOwnProperty.call(raw, key)) {
|
merged[key] = raw[key]
|
}
|
})
|
|
PARAM_NUMERIC_KEYS.forEach((key) => {
|
const n = toNumber(merged[key])
|
if (n !== null) {
|
merged[key] = key === 'limitFhTime' ? Math.round(n) : n
|
}
|
})
|
|
;['tzMoney', 'yjbjMoney', 'ejbjMoney', 'limitFhgl', 'limitFhTime', 'extraPrice'].forEach((key) => {
|
if (!hasValue(merged[key])) {
|
merged[key] = 0
|
}
|
})
|
|
const priceNum = toNumber(raw.price) != null ? toNumber(raw.price) : toNumber(merged.price)
|
if (!hasValue(merged.basePrice) && !hasValue(merged.extraPrice) && priceNum != null) {
|
merged.basePrice = priceNum
|
merged.extraPrice = 0
|
} else {
|
if (!hasValue(merged.extraPrice)) {
|
merged.extraPrice = 0
|
}
|
if (!hasValue(merged.basePrice)) {
|
if (priceNum != null && hasValue(merged.extraPrice)) {
|
merged.basePrice = Number((priceNum - Number(merged.extraPrice)).toFixed(4))
|
} else if (priceNum != null) {
|
merged.basePrice = priceNum
|
merged.extraPrice = 0
|
} else {
|
merged.basePrice = 0
|
}
|
}
|
}
|
|
if (!hasValue(merged.name)) merged.name = raw.name || ''
|
if (merged.remark == null) merged.remark = raw.remark || ''
|
if (merged.status == null || merged.status === '') merged.status = raw.status != null ? raw.status : 0
|
|
if (toNumber(raw.price) != null) {
|
merged.price = toNumber(raw.price)
|
} else {
|
const base = Number(merged.basePrice) || 0
|
const extra = Number(merged.extraPrice) || 0
|
merged.price = Number((base + extra).toFixed(4))
|
}
|
return merged
|
},
|
applyForm (formData) {
|
this.form = formData
|
this.$nextTick(() => {
|
if (this.$refs.form) {
|
this.$refs.form.clearValidate()
|
}
|
})
|
},
|
validatePriceParts (rule, value, callback) {
|
const base = this.form.basePrice
|
const extra = this.form.extraPrice
|
if (base === undefined || base === null || base === '') {
|
callback(new Error('请填写基础价'))
|
} else if (extra === undefined || extra === null || extra === '') {
|
callback(new Error('请填写附加单价'))
|
} else {
|
callback()
|
}
|
},
|
onPricePartChange () {
|
this.syncPrice()
|
this.$nextTick(() => {
|
if (this.$refs.form) {
|
this.$refs.form.validateField('extraPrice')
|
}
|
})
|
},
|
syncPrice () {
|
const base = Number(this.form.basePrice) || 0
|
const extra = Number(this.form.extraPrice) || 0
|
this.form.price = Number((base + extra).toFixed(4))
|
},
|
confirm () {
|
this.syncPrice()
|
this.form.status = this.form.status != null ? this.form.status : 0
|
if (this.form.id == null || this.form.id === '') {
|
this.__confirmCreate()
|
return
|
}
|
this.__confirmEdit()
|
},
|
onClose () {
|
this.isWorking = false
|
this.detailLoading = false
|
this.visible = false
|
this.$emit('close')
|
},
|
open (title, target) {
|
this.title = title
|
this.isWorking = false
|
this.detailLoading = false
|
if (target == null) {
|
this.visible = true
|
this.applyForm(this.mapApiToForm(null, { isNew: true }))
|
return
|
}
|
this.visible = true
|
// 优先用列表选中行回显，与表格展示一致
|
this.applyForm(this.mapApiToForm(target, { isNew: false }))
|
const id = target.id
|
if (id == null || id === '') {
|
return
|
}
|
this.detailLoading = true
|
paramApi.getInfoById(id)
|
.then(data => {
|
if (data == null) {
|
return
|
}
|
// 列表行字段优先，避免接口缺字段时被默认值覆盖
|
this.applyForm(this.mapApiToForm(Object.assign({}, data, target), { isNew: false }))
|
})
|
.catch(() => {})
|
.finally(() => { this.detailLoading = false })
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.electrical-param-form {
|
padding: 8px 0 16px;
|
max-width: 680px;
|
}
|
|
.electrical-param-form ::v-deep .el-form-item {
|
margin-bottom: 20px;
|
}
|
|
.electrical-param-form ::v-deep .el-form-item__label {
|
color: #303133;
|
font-weight: 500;
|
line-height: 32px;
|
}
|
|
.electrical-param-form ::v-deep .el-form-item__content {
|
line-height: normal;
|
}
|
|
.electrical-param-form ::v-deep .el-form-item__content > .param-input,
|
.electrical-param-form ::v-deep .el-form-item__content > .param-field,
|
.electrical-param-form ::v-deep .el-form-item__content > .param-field__row,
|
.electrical-param-form ::v-deep .el-form-item__content > .param-textarea,
|
.electrical-param-form ::v-deep .el-form-item__content > .price-formula {
|
width: 100% !important;
|
max-width: 520px;
|
}
|
|
.param-input {
|
width: 400px !important;
|
max-width: 100%;
|
}
|
|
.param-input ::v-deep .el-input__inner {
|
height: 32px;
|
line-height: 32px;
|
}
|
|
.param-field__row {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
}
|
|
.param-input-number {
|
width: 160px !important;
|
flex-shrink: 0;
|
}
|
|
.param-input-number--wide {
|
width: 200px !important;
|
}
|
|
.param-input-number--formula {
|
width: 120px !important;
|
}
|
|
.param-input-number ::v-deep .el-input {
|
width: 100% !important;
|
}
|
|
.param-input-number ::v-deep .el-input__inner {
|
height: 32px;
|
line-height: 32px;
|
text-align: left;
|
}
|
|
.param-textarea {
|
width: 400px !important;
|
max-width: 100%;
|
}
|
|
.param-textarea ::v-deep .el-textarea__inner {
|
min-height: 88px;
|
padding: 8px 12px;
|
}
|
|
.param-field__unit {
|
margin-left: 8px;
|
color: #606266;
|
font-size: 14px;
|
white-space: nowrap;
|
}
|
|
.param-field__unit--suffix {
|
margin-left: 6px;
|
color: #909399;
|
font-size: 12px;
|
}
|
|
.param-field__tip {
|
margin: 6px 0 0;
|
font-size: 12px;
|
color: #909399;
|
line-height: 1.6;
|
width: 100%;
|
}
|
|
.param-tip-highlight {
|
color: #f56c6c;
|
font-weight: 600;
|
}
|
|
.param-field__info {
|
margin-top: 10px;
|
padding: 10px 12px;
|
background: #f4f8fc;
|
border: 1px solid #e4ebf3;
|
border-radius: 4px;
|
max-width: 100%;
|
}
|
|
.param-field__info-title {
|
margin: 0 0 8px;
|
font-size: 12px;
|
color: #606266;
|
font-weight: 600;
|
}
|
|
.param-field__info-list {
|
margin: 0;
|
padding-left: 18px;
|
font-size: 12px;
|
color: #606266;
|
line-height: 1.75;
|
}
|
|
.param-field__info-list em {
|
font-style: normal;
|
color: #409eff;
|
font-weight: 600;
|
}
|
|
.price-section__help {
|
margin-left: 4px;
|
color: #909399;
|
cursor: pointer;
|
}
|
|
.price-display {
|
display: flex;
|
align-items: center;
|
flex-wrap: nowrap;
|
}
|
|
.price-display__value {
|
font-size: 16px;
|
font-weight: 600;
|
color: #303133;
|
line-height: 32px;
|
white-space: nowrap;
|
}
|
|
.price-display__tag {
|
margin-left: 12px;
|
font-size: 12px;
|
color: #909399;
|
}
|
|
.price-formula-item ::v-deep .el-form-item__content {
|
margin-left: 150px !important;
|
}
|
|
.price-formula {
|
display: flex;
|
align-items: center;
|
flex-wrap: nowrap;
|
gap: 6px 8px;
|
font-size: 14px;
|
color: #303133;
|
white-space: nowrap;
|
overflow-x: auto;
|
}
|
|
.price-formula__eq,
|
.price-formula__unit {
|
flex-shrink: 0;
|
white-space: nowrap;
|
line-height: 32px;
|
}
|
|
.price-formula ::v-deep .param-input-number--formula {
|
flex-shrink: 0;
|
}
|
</style>
|
