<template>
|
<div class="fileinfo">
|
<el-form
|
ref="form"
|
:model="info"
|
label-position="top"
|
label-width="80px"
|
size="mini"
|
:rules="rules"
|
>
|
<el-row :gutter="40">
|
<el-col :span="8">
|
<el-form-item
|
:class="[{ 'is-required': editAble }, 'required']"
|
label="区域"
|
>
|
<el-row :gutter="10">
|
<el-col :span="11">
|
<el-form-item :prop="editAble ? 'battStation' : ''">
|
<el-input
|
v-model="info.battStation"
|
:disabled="!editAble"
|
placeholder="请输入站点名称"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col class="line" :span="2">-</el-col>
|
<el-col :span="11">
|
<el-form-item :prop="editAble ? 'battlineName' : ''">
|
<el-input
|
v-model="info.battlineName"
|
:disabled="!editAble"
|
placeholder="请输入线路名称"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="系统" prop="battGroupName">
|
<el-input
|
v-model="info.battGroupName"
|
placeholder="请输入系统名称"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="测试时间">
|
<el-date-picker
|
v-model="info.testTime"
|
type="datetime"
|
format="yyyy-MM-dd HH:mm:ss"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
:editable="false"
|
:clearable="false"
|
placeholder="选择测试时间"
|
>
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="电池品牌" :prop="editAble ? 'battBrand' : ''">
|
<el-input
|
v-model="info.battBrand"
|
:disabled="!editAble"
|
placeholder="请输入电池品牌"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="电池型号" :prop="editAble ? 'battModel' : ''">
|
<el-input
|
v-model="info.battModel"
|
:disabled="!editAble"
|
placeholder="请输入电池型号"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="电池类型(V)" prop="battVol">
|
<el-input
|
type="number"
|
v-model="info.battVol"
|
placeholder="请输入电池类型"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="电池数量(节)" prop="battCount">
|
<el-input
|
type="number"
|
v-model="info.battCount"
|
placeholder="请输入电池数量"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="标称容量(Ah)" prop="battCap">
|
<el-input
|
type="number"
|
v-model="info.battCap"
|
placeholder="请输入标称容量"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="参考内阻(mΩ)" prop="battRes">
|
<el-input
|
type="number"
|
v-model="info.battRes"
|
placeholder="请输入参考内阻"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="连接条(μΩ)" prop="chainRes">
|
<el-input type="number" v-model="info.chainRes"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="安装时间">
|
<el-date-picker
|
v-model="info.battBatch"
|
:disabled="!editAble"
|
format="yyyy-MM-dd"
|
value-format="yyyyMMdd"
|
type="date"
|
:editable="false"
|
:clearable="false"
|
placeholder="请选择安装时间"
|
>
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item label="外观标记">
|
<el-radio-group
|
v-model="info.battErrflag"
|
:disabled="!editAble"
|
size="medium"
|
>
|
<el-radio border class="good" :label="0">良好</el-radio>
|
<el-radio border :label="1">鼓包/漏液/开裂</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-form>
|
<div class="footer">
|
<el-button type="primary" class="btn" @click="editOk">确认</el-button>
|
<!-- <el-button type="warning" class="btn" @click="editCancel"
|
>取消修改</el-button
|
> -->
|
<el-button type="info" class="btn" @click="quit">退出</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import CONST from "@/assets/js/const";
|
import testVal from "@/assets/js/testVal";
|
|
const O_rules = CONST.rules;
|
export default {
|
name: "FileInfo",
|
props: {
|
info: {
|
type: Object,
|
default() {
|
return {};
|
},
|
},
|
},
|
computed: {
|
editAble() {
|
return this.info.version != "V2.7";
|
},
|
},
|
data() {
|
let R_chainRes = {
|
validator(rule, value, callback) {
|
testVal(rule, value, callback, O_rules.chainRes);
|
},
|
trigger: ["change", "blur"],
|
};
|
const rules = {
|
battStation: [
|
{ required: true, message: "请输入站点名称", trigger: "blur" },
|
],
|
battlineName: [
|
{ required: true, message: "请输入线路名称", trigger: "blur" },
|
],
|
battGroupName: [
|
{ required: true, message: "请输入系统名称", trigger: "blur" },
|
],
|
battBrand: [
|
{ required: true, message: "请输入电池品牌", trigger: "blur" },
|
],
|
battModel: [
|
{ required: true, message: "请输入电池型号", trigger: "blur" },
|
],
|
battVol: [
|
{ required: true, message: "请输入电池类型", trigger: "blur" },
|
{
|
validator(rule, value, callback) {
|
testVal(rule, value, callback, O_rules.battVol);
|
},
|
trigger: ["change", "blur"],
|
},
|
],
|
battCount: [
|
{ required: true, message: "请输入电池数量", trigger: "blur" },
|
],
|
battCap: [
|
{ required: true, message: "请输入标称容量", trigger: "blur" },
|
R_chainRes,
|
],
|
battRes: [
|
{ required: true, message: "请输入参考内阻", trigger: "blur" },
|
{
|
validator(rule, value, callback) {
|
testVal(rule, value, callback, O_rules.battRes);
|
},
|
trigger: ["change", "blur"],
|
},
|
],
|
chainRes: [
|
{ required: true, message: "请输入连接条参考电阻", trigger: "blur" },
|
R_chainRes,
|
],
|
};
|
return {
|
rules,
|
};
|
},
|
components: {},
|
methods: {
|
editOk() {
|
this.$refs.form.validate((valid) => {
|
// 校验通过
|
if (valid) {
|
this.$emit("ok", this.info);
|
} else {
|
this.$message.error("存在校验未通过的数据！");
|
return false;
|
}
|
});
|
},
|
editCancel() {
|
this.$emit("cancel", this.info);
|
},
|
quit() {
|
this.$emit("quit");
|
},
|
},
|
|
mounted() {
|
this.$refs.form.resetFields();
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
:deep(.el-form-item__label) {
|
color: #333;
|
font-weight: bold;
|
}
|
:deep(.el-form--label-top) .el-form-item__label {
|
padding-bottom: 0;
|
}
|
:deep(.el-radio__input) {
|
display: none;
|
}
|
:deep(.el-radio--medium).is-checked.is-checked {
|
background: #edb20a;
|
border-color: #edb20a;
|
&.good {
|
background: green;
|
border-color: green;
|
}
|
.el-radio__label {
|
color: #fff;
|
}
|
}
|
.required.required {
|
margin-bottom: 0;
|
}
|
.footer {
|
display: flex;
|
justify-content: flex-end;
|
}
|
.fileinfo :deep(.el-date-editor) {
|
&.el-input,
|
&.el-input__inner {
|
width: auto;
|
}
|
}
|
:deep(input)[type="number"]::-webkit-outer-spin-button,
|
:deep(input)[type="number"]::-webkit-inner-spin-button {
|
-webkit-appearance: none !important;
|
}
|
</style>
|
