1.效果图
代码：
<template>
<div>
<el-drawer
:title="form.parentfaultName + '-批量创建子故障'"
:visible.sync="dialogVisible"
:direction="direction"
:before-close="handleCloseDrawer"
:wrapperClosable="false"
size="1100px;"
>
<div v-if="dialogVisible" style="margin: 30px 20px 80px 30px">
<div
v-for="(item, index) in forArr"
:key="index"
style="margin-bottom: 20px"
>
<div style="background: #f3f3f3; padding: 20px">
<div
style="
display: flex;
justify-content: space-between;
margin-bottom: 10px;
"
>
<div style="font-size: 18px; color: #404040">
序号:{{ index + 1 }}
</div>
<div style="display: flex">
<div @click="addform" v-if="forArr.length < 10">
<img src="@/assets/addRectangle.png" alt />
<span style="margin: 0 20px 0 10px; color: #3b90f7"
>添加</span
>
</div>
<div v-if="forArr.length > 1" @click="remoform(item, index)">
<img src="@/assets/delRectangle.png" alt />
<span style="margin-left: 10px; color: #3b90f7">移除</span>
</div>
</div>
</div>
<div style="padding-top: 20px; display: flex; background: #ffffff">
<!-- 维修信息 -->
<el-form
:ref="'forArrRef' + index"
:model="forArr[index]"
:rules="rules"
label-width="120px"
style="width: 1000px"
>
<el-row>
<el-col :span="12">
<el-form-item
label="故障名称"
prop="faultName"
class="is-required"
:rules="{
validator: (rule, value, callback) => {
matchDich(
rule,
value,
callback,
index,
'1',
'请选择故障名称'
);
},
trigger: ['blur', 'change'],
}"
>
<el-select
:disabled="disabled"
v-model="forArr[index].faultName"
filterable
clearable
@change="
faultItemChange(forArr[index].faultName, index, '1')
"
placeholder="请选择故障名称"
style="width: 350px"
>
<el-option
v-for="item in optionsManager[1]"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<!-- :rules="{
validator: (rule, value, callback) => {
matchDichfaultItem(
rule,
value,
callback,
index,
'1',
'请选择故障字典'
);
},
trigger: ['blur', 'change'],
}" prop="faultItem"-->
<el-form-item label="故障字典" class="is-required">
<el-input
style="width: 350px"
v-model="forArr[index].faultItem"
placeholder="请选择故障字典"
disabled
></el-input>
</el-form-item>
<div
v-if="!forArr[index].faultItem && !isFist[index]"
style="margin-top: -15px; font-size: 12px; color: #d83d3d"
>
请选择故障字典
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="主副故障" prop="faultStatus" required>
<el-select
v-model="forArr[index].faultStatus"
placeholder="请选择主副故障"
clearable
style="width: 350px"
>
<el-option label="副" :value="1"></el-option>
<el-option label="主" :value="0"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="故障描述" prop="faultDescribe">
<el-input
clearable
@input="
forArr[index].faultDescribe = forArr[
index
].faultDescribe.replace(/\s+/g, '')
"
placeholder="请输入故障描述"
v-model.trim="forArr[index].faultDescribe"
show-word-limit
maxlength="500"
type="textarea"
style="width: 350px"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="监控告警码" prop="warnCode">
<!-- ^(?=.*?[a-z])(?=.*?[0-9])(?=.*?[_\-@&=])[a-z0-9_\-@&=]+$ -->
<!-- onkeyup="this.value=this.value.replace(/[^\w_]/g,'');" -->
<el-input
clearable
style="width: 350px"
v-model.trim="forArr[index].warnCode"
placeholder="请输入监控告警码"
maxlength="100"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<div style="display: flex">
<!-- oninput="value=value.replace(/[^\d]/g,'')" -->
<el-form-item label="故障预警阀值"></el-form-item>
<el-form-item label-width="0" prop="timeValue">
<el-input
style="width: 115px"
clearable
v-model.trim="forArr[index].timeValue"
></el-input>
</el-form-item>
<el-form-item label-width="0px">
<el-select
v-model="forArr[index].timeUnit"
style="width: 120px; margin: 0 3px"
placeholder="请选择时分"
clearable
>
<el-option label="小时" value="hour"></el-option>
<el-option label="分钟" value="minute"></el-option>
</el-select>
</el-form-item>
<el-form-item label-width="0px" prop="faultSize">
<el-input
style="width: 100px"
clearable
v-model.trim="forArr[index].faultSize"
></el-input
>次
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<!-- @change="handleNoActiveArr(index, '4')"-->
<el-col :span="12">
<el-form-item
label="故障来源"
prop="faultSource"
class="is-required"
:rules="{
validator: (rule, value, callback) => {
matchDich(
rule,
value,
callback,
index,
'0',
'请选择故障来源'
);
},
trigger: ['blur', 'change'],
}"
>
<el-select
style="width: 350px"
v-model="forArr[index].faultSource"
placeholder="请选择故障来源"
clearable
@change="handleNoActiveArrSource(index)"
>
<el-option
v-for="item in optionsManager[4]"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
<!-- <el-option label="监控" :value="100602"></el-option>
<el-option label="风控" :value="100601"></el-option>
<el-option label="zabbix" :value="100606"></el-option>
<el-option label="巡检" :value="100605"></el-option> -->
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="故障分类"
prop="faultTypeItem"
class="is-required"
:rules="{
validator: (rule, value, callback) => {
matchDich(
rule,
value,
callback,
index,
'0',
'请选择故障分类'
);
},
trigger: ['blur', 'change'],
}"
>
<el-select
@click.native="handleNoActiveArrfaultType(index)"
@change="handleNoActiveArr(index, '0')"
:disabled="disabled"
v-model="forArr[index].faultTypeItem"
filterable
clearable
placeholder="请选择故障分类"
style="width: 350px"
>
<!-- optionsManager[0] -->
<el-option
v-for="item in optionsfaultType[index]"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="故障等级" prop="faultGrade" required>
<el-select
style="width: 350px"
v-model="forArr[index].faultGrade"
placeholder="请选择故障等级"
clearable
@click.native="handleNoActiveArrfaultSource(index)"
>
<el-option
v-for="item in optionsfaultGrade[index]"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
<!-- <el-option
v-for="item in optionsfaultGrade[index]"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option> -->
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="告警阶段">
<el-select
style="width: 350px"
v-model="forArr[index].alarmStage"
placeholder="请选择告警阶段"
clearable
>
<el-option label="起枪前" :value="1"></el-option>
<el-option label="起枪后" :value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
label="是否自修复"
prop="isSelfreparing"
required
>
<el-select
v-model="forArr[index].isSelfreparing"
placeholder="请选择是否自修复"
clearable
style="width: 350px"
>
<el-option label="是" :value="1"></el-option>
<el-option label="否" :value="0"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否精准定位">
<el-select
v-model="forArr[index].isLocating"
placeholder="请选择是否精准定位"
clearable
style="width: 350px"
>
<el-option label="是" :value="1"></el-option>
<el-option label="否" :value="0"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="是否派送工单">
<el-select
v-model="forArr[index].isDistributeOrder"
placeholder="请选择是否派送工单"
clearable
style="width: 350px"
>
<el-option label="是" :value="1"></el-option>
<el-option label="否" :value="0"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="推荐工具"
prop="tools"
:rules="{
validator: (rule, value, callback) => {
matchToolsArr(rule, value, callback, index, '3');
},
trigger: ['blur', 'change'],
}"
>
<el-select
@change="handleNoActiveArr(index, '3')"
clearable
v-model="forArr[index].tools"
multiple
filterable
collapse-tags
placeholder="请选择推荐工具"
:loading="loading"
style="width: 350px"
>
<el-option
v-for="item in optionsManager[3]"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
label="解决角色"
prop="solveRoleItem"
:rules="{
validator: (rule, value, callback) => {
matchDich(rule, value, callback, index, '2');
},
trigger: ['blur', 'change'],
}"
>
<el-select
@change="handleNoActiveArr(index, '2')"
:disabled="disabled"
v-model="forArr[index].solveRoleItem"
clearable
placeholder="请选择解决角色"
style="width: 350px"
>
<el-option
v-for="item in optionsManager[2]"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row v-show="forArr[index].toggleSearchStatus">
<div
v-for="(itemChild, indexChild) in forArr[index].schemes"
:key="indexChild"
>
<el-form-item
:label="'维修方案' + (indexChild + 1)"
:prop="'schemes.' + indexChild + '.schemeText'"
:rules="rules.schemesRules"
>
<div
@click="getIndex(index, itemChild, indexChild)"
style="height: 110px"
>
<el-upload
v-loading="isUploadingText[index][indexChild]"
:class="'uploadStay' + index + indexChild"
v-model="forArr[index].schemes[indexChild].imgs"
:file-list="forArr[index].repairPlanfiles[indexChild]"
style="margin-top: 6px"
accept=".jpg, .png, .jpeg"
action="#"
:multiple="false"
ref="uploadImg"
:auto-upload="false"
list-type="picture-card"
:on-change="
(file, fileList) => {
handleFileChange(file, fileList, index);
}
"
:on-remove="
(file, fileList) => {
handleRemove(file, fileList, index, indexChild);
}
"
limit="4"
:on-preview="handlePictureCardPreview"
>
<span slot="default" class="el-icon-plus"></span>
</el-upload>
<el-dialog
top="1%"
:close-on-click-modal="false"
:visible.sync="dialogVisiblex"
append-to-body
:wrapperClosable="false"
>
<img width="100%" :src="dialogImageUrl" alt />
</el-dialog>
</div>
<div
style="
display: flex;
justify-content: space-around;
align-items: end;
"
>
<el-input
v-model.trim="
forArr[index].schemes[indexChild].schemeText
"
@input="
forArr[index].schemes[indexChild].schemeText =
forArr[index].schemes[
indexChild
].schemeText.replace(/\s+/g, '')
"
maxlength="500"
show-word-limit
type="textarea"
placeholder="请输入维修方案"
clearable
></el-input>
<img
v-if="forArr[index].schemes.length < 5"
style="width: 25px; height: 25px; margin: 0 5px"
src="~_img/add.png"
@click="addWay(index, itemChild, indexChild)"
alt="添加"
/>
<img
v-if="forArr[index].schemes.length > 1"
style="width: 25px; height: 25px; margin: 0 5px"
@click="removeWay(item, index, itemChild, indexChild)"
src="~_img/del.png"
alt="删除"
/>
</div>
<el-form-item label="所属功率" label-width="80px">
<el-checkbox-group
@change="
kindChange(
forArr[index].schemes[indexChild].kinds,
index,
indexChild
)
"
v-model="forArr[index].schemes[indexChild].kinds"
>
<el-checkbox label="400kw">400kw</el-checkbox>
<el-checkbox label="600kw">600kw</el-checkbox>
<el-checkbox label="900kw">900kw</el-checkbox>
</el-checkbox-group>
</el-form-item>
<!-- <div
v-if="father[index].kindError[indexChild]"
style="
margin-top: -30px;
margin-left: 80px;
color: #d83d3d;
font-size: 12px;
"
>
请选择所属功率
</div> -->
</el-form-item>
</div>
</el-row>
<div
style="
display: flex;
justify-content: center;
margin-bottom: 10px;
"
>
<!-- @click="
forArr[index].toggleSearchStatus =
!forArr[index].toggleSearchStatus
" -->
<span
@click="zhankai(index)"
style="color: #1890ff; margin: 0 5px; cursor: pointer"
>
{{
forArr[index].toggleSearchStatus ? "收起内容" : "展开内容"
}}
<img
v-if="forArr[index].toggleSearchStatus"
src="~_img/up.png"
alt="展开"
/>
<img
alt="收起"
v-if="!forArr[index].toggleSearchStatus"
src="~_img/down.png"
/>
</span>
</div>
</el-form>
</div>
</div>
</div>
</div>
<div
style="
position: fixed;
bottom: 0px;
width: 1097px;
height: 80px;
background-color: white;
z-index: 9999;
box-shadow: -1px -1px 8px -8px #0e0000;
"
>
<div
class="demo-drawer__footer"
style="position: fixed; bottom: 20px; right: 45px"
>
<el-button :loading="btnLoading" @click="onSubmit('save')"
>保 存</el-button
>
<el-button
type="primary"
:loading="btnLoading"
@click="onSubmit('sub')"
style="margin-left: 20px"
>提 交</el-button
>
</div>
</div>
</el-drawer>
<!-- 放大图片吗 -->
<div @click.stop="handleClickItem">
<el-image-viewer
v-if="showViewer"
:on-close="closeImage"
:url-list="imgList"
:z-index="5000"
/>
</div>
</div>
</template>
<script>
import axios from "axios";
axios.defaults.timeout = 120000;
import {
editChildFaultKnowledgeList, //新增
selectDictionaryItemNameList, //字典
querySonFault, //查询保存的子故障
submitChildFaultKnowledgeList, //保存子故障
} from "_config/url.js";
import { vaguemixinChil } from "_mixin/mixin.js";
import { dialogmixin } from "_mixin/dialogmixin.js";
import { dialogDom, dialogClose } from "_utils/dialogVm.js";
export default {
mixins: [dialogmixin, vaguemixinChil],
components: {
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
data() {
return {
isFist: [],
isUploadingText: {
0: { 0: false, 1: false, 2: false, 3: false, 4: false },
1: { 0: false, 1: false, 2: false, 3: false, 4: false },
2: { 0: false, 1: false, 2: false, 3: false, 4: false },
3: { 0: false, 1: false, 2: false, 3: false, 4: false },
4: { 0: false, 1: false, 2: false, 3: false, 4: false },
5: { 0: false, 1: false, 2: false, 3: false, 4: false },
6: { 0: false, 1: false, 2: false, 3: false, 4: false },
7: { 0: false, 1: false, 2: false, 3: false, 4: false },
8: { 0: false, 1: false, 2: false, 3: false, 4: false },
9: { 0: false, 1: false, 2: false, 3: false, 4: false },
},
DicBoole: [],
fromPage: "edieditdic",
id: "",
dialogImageUrl: "",
dialogVisiblex: false,
formxxx: {},
// father: [{ kindError: [] }],
father: [],
btnLoading: false,
// fromPage: "addRole",
// repairPlanfiles: [],
forArr: [{ repairPlanfiles: [[""]], faultGrade: null, faultItem: null }],
forArrIndex: "", //子故障下标
schemesIndex: "", //图片下表
url: {
save: submitChildFaultKnowledgeList, //保存
add: editChildFaultKnowledgeList, //提交
vague: [
{ a: selectDictionaryItemNameList, b: "faultTypeItem" },
{ a: selectDictionaryItemNameList, b: "faultItem" },
{ a: selectDictionaryItemNameList, b: "solveRoleItem" },
{ a: selectDictionaryItemNameList, b: "tools" },
{ a: selectDictionaryItemNameList, b: "faultSource" },
],
},
restaurants: [], //模糊搜索的数据
dialogVisible: false,
direction: "rtl",
form: {},
typesOf: "",
wayArr: [{}],
dialog: false,
rules: {
warnCode: [{ validator: this.ISwarnCode, trigger: ["blur", "change"] }],
timeValue: [
{
validator: this.validatetimeScopeNO,
trigger: ["blur", "change"],
},
],
faultSize: [
{
validator: this.validatetimeScopeNO,
trigger: ["blur", "change"],
},
],
faultStatus: [
{
required: true,
message: "请选择主副故障",
trigger: ["blur", "change"],
},
],
faultItem: [
{
required: true,
message: "请选择故障字典",
trigger: ["blur", "change"],
},
],
faultGrade: [
{
required: true,
message: "请选择故障等级",
trigger: ["change"],
},
],
isSelfreparing: [
{
required: true,
message: "请选择是否自修复",
trigger: ["blur", "change"],
},
],
},
showViewer: false,
imgList: [],
optionsfaultGrade: [[]],
optionsfaultType: [[]],
};
},
methods: {
ISwarnCode(rule, value, callback) {
if (value) {
const reg = /^[a-zA-Z0-9,、，]+$/u;
if (!reg.test(value)) {
return callback("只可输入数字、字母、逗号、顿号");
} else {
callback();
}
}
if (!value) {
callback();
}
},
// 放大图片相关
voucherPreview(url) {
this.imgList.push(url);
this.showViewer = true;
},
handleClickItem(e) {
if (e.target.getAttribute("class") === "el-image-viewer__mask") {
this.imgList = [];
this.showViewer = false;
}
},
closeImage() {
this.imgList = [];
this.showViewer = false;
},
handlePictureCardPreview(file) {
this.voucherPreview(file.url);
},
// 放大图片结束
zhankai(index) {
this.$forceUpdate();
this.forArr[index].toggleSearchStatus =
!this.forArr[index].toggleSearchStatus;
this.forArr.forEach((item, index) => {
if (item.schemes) {
console.log("有维修方案");
item.schemes.forEach((itch, itInde) => {
if (!itch.imgs) {
this.forArr[index].schemes[itInde].imgs = [];
}
if (!itch.imgVos) {
this.forArr[index].schemes[itInde].imgVos = [];
}
});
} else {
this.forArr[index].schemes = [];
this.forArr[index].schemes.push({
schemeText: "",
imgs: [],
imgVos: [],
kinds: [],
});
}
});
},
open1() {
dialogDom();
this.dialogVisible = true;
this.$post(querySonFault, {
faultItem: this.form.parentFaultItem,
})
.then((res) => {
if (res.status == "200") {
if (res.data.status == "200") {
// this.getOptionSelect();
if (res.data.data) {
this.typesOf = "edit";
this.forArr = res.data.data.childArr;
this.forArr.forEach((item, index) => {
// if (this.father[index]) {
// this.father.push({ kindError: [] });
// }
this.handleNoActiveArrfaultType(index);
this.handleNoActiveArrfaultSource(index);
if (item.tools) {
let arr = [];
for (let i in item.tools) {
arr.push(item.tools[i].itemCode);
}
item.tools = arr;
}
item.repairPlanfiles = [[]];
item.schemes = item.schemeVoList;
if (item.schemes) {
item.schemes.forEach((chiSche, chiNdex) => {
if (!item.repairPlanfiles[chiNdex]) {
item.repairPlanfiles[chiNdex] = [];
}
// 判断是否有维修方案开始
if (chiSche.schemeText) {
if (chiSche.kind) {
chiSche.kinds = chiSche.kind.split(",");
} else {
chiSche.kinds = [];
console.log(
"chiSche.kinds",
chiSche.kind,
chiSche.kinds
);
}
if (chiSche.imgs) {
this.$forceUpdate();
chiSche.imgs.forEach((imgItem, imgIndex) => {
let obj = {};
obj.url =
this.PIC_URL +
item.schemes[chiNdex].imgs[imgIndex].imgPath;
item.repairPlanfiles[chiNdex].push(obj);
});
if (chiSche.imgs.length == 4) {
let className = `uploadStay${index}${chiNdex}`;
this.$nextTick(() => {
let ele = document
.querySelector(`.${className}`)
.querySelector(".el-upload--picture-card");
ele.style.display = "none";
});
}
} else {
this.$forceUpdate();
item.repairPlanfiles = [[]];
}
}
// 判断是否有维修方案结束
});
} else {
item.repairPlanfiles = [[]];
}
if (!item.timeUnit) {
item.timeUnit = "hour";
}
console.log("item", item);
});
this.id = res.data.data.id;
this.$nextTick(() => {
this.getOptionSelectChild();
});
} else {
this.getOptionSelectChild();
this.$forceUpdate();
this.typesOf = "add";
// this.father = [{ kindError: [] }];
this.forArr = [
{
schemes: [{ schemeText: "", imgs: [], kinds: [] }],
warnCode: "",
toggleSearchStatus: false,
repairPlanfiles: [[]],
timeUnit: "hour",
},
];
// let className = `uploadStay${index}${chiNdex}`;
this.$nextTick(() => {
let ele = document.querySelectorAll(
".el-upload--picture-card"
);
for (let i in ele) {
if (ele[i].style) {
ele[i].style.display = "";
}
}
});
}
} else {
this.$message.warning(res.data.msg);
}
} else {
this.$message.warning(res.msg);
}
})
.catch(() => {
this.$message({
message: "网络异常,请稍后再试!",
type: "error",
});
});
},
open() {
this.isFist = new Array(10).fill(true);
// this.getOptionSelect();
dialogDom();
this.forArr = this.form.forArr;
// this.father = [{ kindError: [] }];
for (let i = 0; i < this.forArr.length; i++) {
if (this.$refs.forArrRef0) {
const formRef = this.$refs["forArrRef" + i][0]; // 使用ref属性访问表单组件
if (formRef) {
formRef.resetFields(); // 清除表单校验状态
}
}
}
this.dialogVisible = true;
this.optionsManager = {};
this.$nextTick(() => {
this.open1();
});
},
validatetimeScopeNO(rule, value, callback) {
let reg = /^([1-9][0-9]{0,1})$/;
if (!value) {
callback();
} else if (!reg.test(value)) {
return callback("请输入1~99之间整数");
}
callback();
},
kindChange(e, fatherIndex, ChildIndex) {
this.$forceUpdate();
// if (this.forArr[fatherIndex].schemes[ChildIndex].schemeText) {
// if (e.length) {
// this.father[fatherIndex].kindError[ChildIndex] = false;
// } else {
// this.father[fatherIndex].kindError[ChildIndex] = true;
// }
// }
},
handleRemove(file, fileList, index, chiIndex) {
// let num;
this.isUploadingText[index][chiIndex] = true;
setTimeout(() => {
this.forArrIndex = index;
this.schemesIndex = chiIndex;
this.forArr[this.forArrIndex].schemes[this.schemesIndex].imgs = [];
this.forArr[this.forArrIndex].schemes[this.schemesIndex].imgVos = [];
this.forArr[this.forArrIndex].repairPlanfiles[this.schemesIndex] = [];
fileList.forEach((item) => {
if (item.raw) {
this.forArr[this.forArrIndex].schemes[this.schemesIndex].imgs.push(
file.raw
);
this.forArr[this.forArrIndex].repairPlanfiles[
this.schemesIndex
].push(item);
} else {
if (item.url) {
let aa = item.url.toString().split("aiops/");
console.log("aa", aa[1]);
this.forArr[this.forArrIndex].schemes[
this.schemesIndex
].imgVos.push(aa[1]);
this.forArr[this.forArrIndex].repairPlanfiles[
this.schemesIndex
].push(item);
} else {
this.forArr[this.forArrIndex].schemes[
this.schemesIndex
].imgVos.push(item);
this.forArr[this.forArrIndex].repairPlanfiles[
this.schemesIndex
].push(item);
}
}
});
if (fileList.length < 4) {
let className = `uploadStay${this.forArrIndex}${this.schemesIndex}`;
console.log("className", className);
this.$nextTick(() => {
let ele = document
.querySelector(`.${className}`)
.querySelector(".el-upload--picture-card");
ele.style.display = "";
});
}
this.isUploadingText[index][chiIndex] = false;
}, 1000);
},
addWay(index) {
// 父级下表，子集，子集下表
if (this.typesOf == "add") {
this.forArr[index].schemes.push({
schemeText: "",
imgs: [],
kinds: [],
});
} else {
this.forArr[index].schemes.push({
schemeText: "",
imgs: [],
kinds: [],
imgVos: [],
});
}
// 图片集合
this.forArr[index].repairPlanfiles.push([]);
},
removeWay(item, index, itemChild, indexChild) {
if (this.forArr[index].schemes[indexChild].imgs.length == 4) {
let className = `uploadStay${index}${indexChild}`;
console.log("className", className);
this.$nextTick(() => {
let ele = document
.querySelector(`.${className}`)
.querySelector(".el-upload--picture-card");
ele.style.display = "";
});
// let className = `uploadStay${index}`;
// console.log("className", className);
// this.$nextTick(() => {
// let ele = document
// .querySelector(`.${className}`)
// .querySelector(".el-upload--picture-card");
// ele.style.display = "";
// });
}
// this.father[index].kindError.splice(indexChild, 1);
this.forArr[index].repairPlanfiles.splice(indexChild, 1);
this.$nextTick(() => {
this.forArr[index].schemes.splice(indexChild, 1);
});
},
addform() {
this.forArr.push({
schemes: [{ schemeText: "", imgs: [], kinds: [] }],
faultStatus: "",
toggleSearchStatus: false,
repairPlanfiles: [[]],
timeUnit: "hour",
});
this.DicBoole.push([false, false, false, false]);
// this.father.push({ kindError: [] });
this.optionsfaultGrade.push([]);
this.optionsfaultType.push([]);
},
remoform(item, index) {
console.log("index", index);
if (this.forArr.length > Number(index) + 1) {
} else {
this.isFist[index] = false;
this.isFist.splice(index, 1);
}
this.forArr.splice(index, 1);
this.father.splice(index, 1);
this.optionsfaultGrade.splice(index, 1);
this.optionsfaultType.splice(index, 1);
},
handleExceed(files, fileList) {
this.$message.warning("当前限制选择 5 个文件");
},
onSubmit(e) {
this.btnLoading = true;
// this.isFist = false;
let forArr = this.forArr;
let hash = {};
for (let i in forArr) {
if (hash[forArr[i].faultItem]) {
console.log("hash", hash);
this.btnLoading = false;
return this.$message.warning("故障字典不可重复");
}
hash[forArr[i].faultItem] = true;
}
// let kindError = [];
// forArr.forEach((item, fatherIndex) => {
// console.log("item.schemes", item.schemes);
// if (item.schemes && item.schemes.length) {
// item.schemes.forEach((schemItem, ChildIndex) => {
// if (schemItem.schemeText) {
// if (schemItem.kinds.length) {
// this.father[fatherIndex].kindError[ChildIndex] = false;
// } else {
// this.father[fatherIndex].kindError[ChildIndex] = true;
// kindError.push("1");
// }
// }
// });
// }
// });
let aa = [];
for (let i = 0; i < forArr.length; i++) {
this.isFist[i] = false;
const formRef = this.$refs["forArrRef" + i][0]; // 使用ref属性访问表单组件
if (formRef) {
console.log("formRef", formRef);
formRef.validate((valid) => {
console.log("valid", valid);
// && !kindError.length
if (valid) {
aa.push("1");
if (aa.length == this.forArr.length) {
this.submit(e);
}
} else {
this.btnLoading = false;
}
});
} else {
this.btnLoading = false;
}
}
},
submit(e) {
let aa;
if (e == "save") {
aa = this.url.save;
}
if (e == "sub") {
aa = this.url.add;
}
let forArr = this.forArr;
let formData = new FormData();
if (this.typesOf == "edit") {
formData.append(`id`, this.id);
}
for (let i in forArr) {
formData.append(
`childArr[${i}].creator`,
JSON.parse(localStorage.getItem("user")).staffName
);
formData.append(
`childArr[${i}].parentFaultItem`,
this.form.parentFaultItem
);
formData.append(
`childArr[${i}].warnCode`,
forArr[i].warnCode ? forArr[i].warnCode : ""
);
// formData.append(`childArr[${i}].faultName`, forArr[i].faultName);
formData.append(`childArr[${i}].faultItem`, forArr[i].faultItem);
formData.append(
`childArr[${i}].faultDescribe`,
forArr[i].faultDescribe ? forArr[i].faultDescribe : ""
);
formData.append(
`childArr[${i}].faultTypeItem`,
forArr[i].faultTypeItem ? forArr[i].faultTypeItem : ""
);
formData.append(
`childArr[${i}].alarmStage`,
forArr[i].alarmStage ? forArr[i].alarmStage : ""
);
if (forArr[i].isLocating === 0 || forArr[i].isLocating === 1) {
formData.append(`childArr[${i}].isLocating`, forArr[i].isLocating);
}
formData.append(`childArr[${i}].faultGrade`, forArr[i].faultGrade);
formData.append(`childArr[${i}].faultSource`, forArr[i].faultSource);
if (
forArr[i].isDistributeOrder === 0 ||
forArr[i].isDistributeOrder === 1
) {
formData.append(
`childArr[${i}].isDistributeOrder`,
forArr[i].isDistributeOrder
);
}
if (forArr[i].isSelfreparing === 0 || forArr[i].isSelfreparing === 1) {
formData.append(
`childArr[${i}].isSelfreparing`,
forArr[i].isSelfreparing
);
}
formData.append(
`childArr[${i}].solveRoleItem`,
forArr[i].solveRoleItem ? forArr[i].solveRoleItem : ""
);
if (forArr[i].timeUnit && forArr[i].timeValue && forArr[i].faultSize) {
formData.append(`childArr[${i}].timeUnit`, forArr[i].timeUnit);
formData.append(`childArr[${i}].timeValue`, forArr[i].timeValue);
formData.append(`childArr[${i}].faultSize`, forArr[i].faultSize);
} else {
formData.append(`childArr[${i}].timeUnit`, "");
formData.append(`childArr[${i}].timeValue`, "");
formData.append(`childArr[${i}].faultSize`, "");
}
formData.append(`childArr[${i}].faultStatus`, forArr[i].faultStatus);
for (let j in forArr[i].tools) {
formData.append(`childArr[${i}].tools[${j}].dataId`, "");
formData.append(
`childArr[${i}].tools[${j}].itemCode`,
forArr[i].tools[j]
);
formData.append(`childArr[${i}].tools[${j}].modelType`, "");
}
// 维修方案
for (let j in forArr[i].schemes) {
if (forArr[i].schemes[j].schemeText) {
formData.append(`childArr[${i}].schemes[${j}].sort`, j);
formData.append(
`childArr[${i}].schemes[${j}].schemeText`,
forArr[i].schemes[j].schemeText
);
if (this.typesOf == "add") {
// 新增的图片
for (let h in forArr[i].schemes[j].imgs) {
formData.append(
`childArr[${i}].schemes[${j}].imgs`,
forArr[i].schemes[j].imgs[h]
);
}
} else {
// 原来的图片
for (let h in forArr[i].schemes[j].imgs) {
formData.append(
`childArr[${i}].schemes[${j}].imgVos`,
forArr[i].schemes[j].imgs[h].imgPath
);
}
// 新增的图片
for (let h in forArr[i].schemes[j].imgVos) {
if (forArr[i].schemes[j].imgVos[h]) {
let leixing = typeof forArr[i].schemes[j].imgVos[h];
console.log("leixing", leixing);
if (leixing == "object") {
formData.append(
`childArr[${i}].schemes[${j}].imgs`,
forArr[i].schemes[j].imgVos[h]
);
} else {
formData.append(
`childArr[${i}].schemes[${j}].imgVos`,
forArr[i].schemes[j].imgVos[h]
);
}
}
}
}
for (let h in forArr[i].schemes[j].kinds) {
formData.append(
`childArr[${i}].schemes[${j}].kinds`,
forArr[i].schemes[j].kinds[h]
);
}
}
}
}
let config = {
headers: {
"Content-Type": "multipart/form-data",
},
};
// .post(this.url.add, formData, config)
axios
.post(aa, formData, config)
.then((res) => {
this.btnLoading = false;
if (res.data.status == 200) {
if (res.data.data.status == 200) {
this.DicBoole = [];
this.$message.success(res.data.data.msg);
this.dialogVisible = false;
dialogClose();
this.$emit("ok");
this.$forceUpdate();
} else {
this.$message.warning(res.data.data.msg);
}
} else {
this.$message.warning(res.data.msg);
}
})
.catch(() => {
this.DicBoole = [];
this.btnLoading = false;
});
},
// 添加图片
getIndex(index, itemChild, indexChild) {
this.schemesIndex = indexChild;
this.forArrIndex = index;
},
handleFileChange(file, fileList, index) {
const isLt5M = file.size / 1024 / 1024 < 5;
const isJPG =
file.raw.type === "image/jpeg" ||
file.raw.type === "image/jpg" ||
file.raw.type === "image/png";
if (this.typesOf == "add") {
if (!isJPG) {
this.$message({
message: "上传失败！上传图片文件只支持JPG、PNG、JPEG",
type: "warning",
});
this.$refs.uploadImg[index].handleRemove(file);
return false;
}
if (!isLt5M) {
this.$message({
message: "上传图片大小不能超过5M!",
type: "warning",
});
this.$refs.uploadImg[index].handleRemove(file);
return false;
}
this.forArr[this.forArrIndex].schemes[this.schemesIndex].imgs.push(
file.raw
);
this.forArr[this.forArrIndex].repairPlanfiles[this.schemesIndex].push(
file
);
// if (!isJPG || !isLt5M) {
// this.forArr[this.forArrIndex].schemes[this.schemesIndex].imgs.splice(
// -1,
// 1
// );
// this.forArr[this.forArrIndex].repairPlanfiles[
// this.schemesIndex
// ].splice(-1, 1);
// }
} else {
if (!isJPG) {
this.$message({
message: "上传失败！上传图片文件只支持JPG、PNG、JPEG",
type: "warning",
});
this.$refs.uploadImg[index].handleRemove(file);
return false;
}
if (!isLt5M) {
this.$message({
message: "上传图片大小不能超过5M!",
type: "warning",
});
this.$refs.uploadImg[index].handleRemove(file);
return false;
}
this.forArr[this.forArrIndex].schemes[this.schemesIndex].imgVos.push(
file.raw
);
this.forArr[this.forArrIndex].repairPlanfiles[this.schemesIndex].push(
file
);
// if (!isJPG || !isLt5M) {
// this.forArr[this.forArrIndex].schemes[
// this.schemesIndex
// ].imgVos.splice(-1, 1);
// this.forArr[this.forArrIndex].repairPlanfiles[
// this.schemesIndex
// ].splice(-1, 1);
// }
}
if (fileList.length == 4) {
let className = `uploadStay${this.forArrIndex}${this.schemesIndex}`;
console.log("className", className);
this.$nextTick(() => {
let ele = document
.querySelector(`.${className}`)
.querySelector(".el-upload--picture-card");
ele.style.display = "none";
});
}
},
// 模糊查询相关
getVagueParam(item) {
// 1004 故障分类
let param;
if (item == 0) {
param = {
dictionaryCode: 1004,
//modelTag: "2",
};
}
if (item == 1) {
param = {
dictionaryCode: this.form.parentFaultItem,
//modelTag: "2",
};
}
if (item == 2) {
param = {
dictionaryCode: 1018,
//modelTag: "2",
};
}
if (item == 3) {
param = {
dictionaryCode: 1017,
//modelTag: "2",
};
}
if (item == 4) {
param = {
dictionaryCode: 1006,
//modelTag: "2",
};
}
return param;
},
handleNoActiveArrSource(index) {
if (this.forArr[index].faultGrade) {
this.forArr[index].faultGrade = null;
}
if (this.forArr[index].faultTypeItem) {
this.forArr[index].faultTypeItem = null;
}
},
getSource(index) {
this.$postjson(selectDictionaryItemNameList, {
// source: this.forArr[index].faultSource,
dictionaryCode: this.forArr[index].faultSource == 100602 ? 2000 : 1013,
})
.then((res) => {
if (res.status == "200") {
if (res.data.status == "200") {
this.optionsfaultGrade[index] = res.data.data.map((itemValue) => {
return {
label: itemValue.name,
value: itemValue.value,
};
});
this.$forceUpdate();
} else {
this.$message.warning(res.data.msg);
}
} else {
this.$message.warning(res.msg);
}
})
.catch(() => {
this.$message({
message: "网络异常,请稍后再试!",
type: "error",
});
});
},
getfaultType(index) {
this.$postjson(selectDictionaryItemNameList, {
source: this.forArr[index].faultSource,
type: 1,
dictionaryCode: 1004,
})
.then((res) => {
if (res.status == "200") {
if (res.data.status == "200") {
this.optionsfaultType[index] = res.data.data.map((itemValue) => {
return {
label: itemValue.name,
value: itemValue.value,
};
});
this.$forceUpdate();
} else {
this.$message.warning(res.data.msg);
}
} else {
this.$message.warning(res.msg);
}
})
.catch(() => {
this.$message({
message: "网络异常,请稍后再试!",
type: "error",
});
});
},
handleNoActiveArrfaultType(index) {
this.optionsfaultType[index] = [];
if (this.forArr[index].faultSource) {
this.getfaultType(index);
} else {
this.$message.warning("请先选择故障来源");
}
},
handleNoActiveArrfaultSource(index) {
this.optionsfaultGrade[index] = [];
if (this.forArr[index].faultSource) {
this.getSource(index);
} else {
this.$message.warning("请先选择故障来源");
}
},
faultItemChange(e, index, faultIndex) {
// this.$forceUpdate();
this.isFist[index] = false;
this.DicBoole[index][faultIndex] = false;
if (e) {
this.forArr[index].faultItem = e;
} else {
this.forArr[index].faultItem = "";
}
},
handleCloseDrawer() {
dialogClose();
this.dialogVisible = false;
this.btnLoading = false;
this.DicBoole = [];
},
},
};
</script>
<style lang="less" scoped>
.aa {
display: flex;
justify-content: space-between;
}
/deep/.el-drawer__header {
width: 1100px !important;
}
</style>