Files
hb_pqs_web/src/views/Process-supervision/components/electricitymanagement/components/PlannedRectification.vue
2025-01-09 19:02:44 +08:00

276 lines
7.5 KiB
Vue

<template>
<div>
<!-- 计划整改 -->
<el-dialog
:close-on-click-modal="false"
title="填报"
:visible.sync="rectificationMeasures"
width="70%"
:before-close="handleClose"
>
<el-divider
content-position="left"
style="font-size: 18px; font-weight: bolder"
>问题基本信息</el-divider
>
<el-form :inline="true">
<el-form-item label="所属单位:">
<el-input
v-model="addData.orgName"
clearable
placeholder="请填写"
disabled
>
</el-input>
</el-form-item>
<el-form-item label="问题来源:">
<el-select
disabled
v-model="addData.problemSources"
placeholder="请选择"
>
<el-option
v-for="item in OnlineList"
:key="item.code"
:label="item.name"
:value="item.code"
>
</el-option>
</el-select>
<!-- <el-input
v-model="addData.problemSources"
clearable
placeholder="请填写"
disabled
>
</el-input> -->
</el-form-item>
<el-form-item label="问题名称:">
<el-input
v-model="addData.problemName"
clearable
placeholder="请填写"
disabled
>
</el-input>
</el-form-item>
<el-form-item label="问题编号:">
<el-input
v-model="addData.powerQualityProblemNo"
disabled
clearable
placeholder="请填写"
>
</el-input>
</el-form-item>
</el-form>
<el-divider
content-position="left"
style="font-size: 18px; font-weight: bolder"
>填报流程</el-divider
>
<el-row type="flex" justify="space-between">
<el-col :span="4">
<el-steps
style="height: 250px"
direction="vertical"
:active="1"
finish-status="success"
>
<el-step>
<el-card
slot="description"
style="width: 160px"
body-style="background:gray"
>
<p style="color: white">原因分析</p>
</el-card>
</el-step>
<el-step>
<el-card
slot="description"
style="width: 160px"
body-style="background:#037272bc"
>
<p style="color: white">计划整改措施</p>
</el-card>
</el-step>
<el-step>
<el-card
slot="description"
style="width: 160px"
body-style="background:gray"
>
<p style="color: white">实际采取措施</p>
</el-card>
</el-step>
<el-step>
<el-card
slot="description"
style="width: 160px"
body-style="background:gray"
>
<p style="color: white">成效分析</p>
</el-card>
</el-step>
</el-steps>
</el-col>
<el-col :span="20">
<el-form
:model="rectificationMeasuresData"
:rules="rules"
ref="form"
class="form"
>
<el-form-item
label="电网侧整改治理措施:"
prop="reportProcessContentJhzg"
>
<el-checkbox-group
v-model="rectificationMeasuresData.reportProcessContentJhzg"
>
<el-checkbox
v-for="(item, ind) in List"
:key="ind"
:label="item.code"
>{{ item.name }}</el-checkbox
>
</el-checkbox-group>
</el-form-item>
<el-divider></el-divider>
<el-form-item
label="用户侧整改治理措施:"
prop="userReportProcessContentJhzg"
>
<el-checkbox-group
v-model="rectificationMeasuresData.userReportProcessContentJhzg"
>
<el-checkbox
v-for="(item, ind) in List"
:key="ind"
:label="item.code"
>{{ item.name }}</el-checkbox
>
</el-checkbox-group>
</el-form-item>
<el-divider></el-divider>
<el-form-item
class="item"
label="计划整改措施报告:"
prop="fileNameJhzg"
>
<File ref="File" />
</el-form-item>
</el-form>
</el-col>
</el-row>
<div style="display: flex; justify-content: center; margin-top: 10px">
<el-button type="primary" class="ml20" @click="Submit"
>提交审核</el-button
>
<el-button type="primary" class="ml20" @click="handleClose"
>取消</el-button
>
</div>
</el-dialog>
</div>
</template>
<script>
import { dicData } from "@/assets/commjs/dictypeData";
import { correctiveAction } from "@/api/Process-supervision/electricitymanagement/electricitymanagement";
import File from "./File.vue";
export default {
components: { File },
props: {
addData: {
type: [Object, Array],
default: {
orgName: "",
problemSources: "",
problemName: "",
powerQualityProblemNo: "",
},
},
},
data() {
return {
rectificationMeasures: false,
rectificationMeasuresData: {
reportProcessContentJhzg: [],
userReportProcessContentJhzg: [],
fileNameJhzg: "", //计划整改文件名称
filePathJhzg: "", // 计划整改文件路径
},
OnlineList: [],
rules: {
reportProcessContentJhzg: [
{ required: true, message: "请选择", trigger: "change" },
],
userReportProcessContentJhzg: [
{ required: true, message: "请选择", trigger: "change" },
],
fileNameJhzg: [
{ required: true, message: "请上传文件", trigger: "blur" },
],
},
List: [],
};
},
created() {},
mounted() {
this.Dictionaries();
},
methods: {
// 字典表
Dictionaries() {
// 电网侧原因
this.List = dicData("Plan_Take", ["Load_Type"]);
this.OnlineList = dicData("Problem_Sources", []);
},
handleClose() {
this.$emit("handleClose");
},
//提交
Submit() {
this.rectificationMeasuresData.fileNameJhzg =
this.$refs.File.fileList.minFileName;
this.rectificationMeasuresData.filePathJhzg =
this.$refs.File.fileList.minFileUrl;
this.$refs["form"].validate((valid) => {
if (valid) {
this.rectificationMeasuresData.powerQualityProblemNo =
this.addData.powerQualityProblemNo;
correctiveAction(this.rectificationMeasuresData).then((res) => {
if (res.code == "A0000") {
this.$message({
message: "填报成功!",
type: "success",
});
this.$emit("handleClose");
this.$emit("onSubmit");
}
});
}
});
},
},
computed: {},
watch: {},
};
</script>
<style lang="less" scoped>
::v-deep .el-card__body,
.el-main {
padding: 10px;
}
</style>