2022-09-23 15:36:48 +08:00

868 lines
26 KiB
Vue

<template>
<div class="fullHeight">
<div class="block fullHeight">
<div class="system-left">
<!-- <h1>
检查库
<el-button
type="primary"
plain
size="small"
style="float:right;margin-top: -2px;"
@click="add(1)"
>
新增检查库
</el-button>
</h1> -->
<div class="pageTitle">
检查库
<el-button
type="primary"
plain
size="small"
style="float: right; margin-top: -2px"
@click="add(1)"
>
新增检查库
</el-button>
</div>
<vue-scroll class="treeList">
<div style="padding-top: 10px">
<ul v-for="(name, index) in dataList" :key="index">
<!-- <li :class="{active:index==current}"> -->
<li :class="{ active: index == current && currentTwo == -1 }">
<div
class="clickName"
@click="next(index, $event, name, 1)"
style="display: inline-block"
>
<div class="imgbox">
<i v-if="current != index" class="el-icon-arrow-right"></i>
<i v-else class="el-icon-arrow-down"></i>
</div>
<!-- <span>{{name.dangerName}}</span> -->
<!-- <span>{{name.dangerName.length>9?name.dangerName.substring(0,8)+'...':name.dangerName}}</span>-->
<el-popover
placement="top-start"
v-model="name.visible"
:content="name.dangerName"
>
<span
slot="reference"
@mouseenter="
name.visible = name.dangerName.length > 9 ? true : false
"
@mouseleave="name.visible = false"
>{{
name.dangerName.length > 9
? name.dangerName.substring(0, 8) + "..."
: name.dangerName
}}</span
>
</el-popover>
</div>
<div
style="
float: right;
clear: both;
height: 32px;
margin-right: 20px;
"
>
<!-- <img
@click="add(2,name.id)"
src="../../assets/images/add-blue.png"
style="vertical-align: -1.3px;margin-right: 12px;"
/> -->
<!-- <div style="float:right;clear:both;height: 32px;margin-right:25px"> -->
<el-button
type="text"
size="small"
style="font-size: 14px"
@click="add(2, name.id)"
>
新增大项</el-button
>
<el-button
type="text"
size="small"
icon="el-icon-edit"
@click="edit1(name, 1)"
style="font-size: 14px"
></el-button>
<el-button
type="text"
size="medium"
style="color: red;font-size: 14px;"
icon="el-icon-delete"
@click="del1(name.id,1)"
></el-button>
</div>
</li>
<ul
v-for="(item, i) in name.list"
id="child"
v-if="current == index"
:key="i"
>
<!-- <li :class="{actives:index==current&&i==threeIndex}"> -->
<li
:class="{ active: i == currentTwo && current != -1 }"
@click="next2(item)"
>
<!-- <span @click="showThree(item,i)">{{item.dangerName}}</span> -->
<!-- <div
@click="showThree(item,i)"
style="display:inline-block;width:60%"
>{{item.dangerName}}</div>-->
<el-popover
placement="top-start"
v-model="item.visible"
:content="item.dangerName"
>
<div
slot="reference"
@mouseenter="
item.visible = item.dangerName.length > 9 ? true : false
"
@mouseleave="item.visible = false"
style="display: inline-block; width: 60%"
@click="showThree(item, i)"
>
{{
item.dangerName.length > 10
? item.dangerName.substring(0, 9) + "..."
: item.dangerName
}}
</div>
</el-popover>
<!--<div
style="display:inline-block;width:60%"
@click="showThree(item,i)"
>{{item.dangerName.length>10?item.dangerName.substring(0,9)+'...':item.dangerName}}</div>-->
<div
style="
float: right;
clear: both;
height: 32px;
margin-right: 25px;
"
>
<!-- <el-button
type="text"
size="medium"
icon="el-icon-add"
style="margin-right:10px;font-size: 14px;"
@click="add(2,item.id)"
></el-button> -->
<el-button
type="text"
size="medium"
icon="el-icon-edit"
style="font-size: 14px"
@click="edit1(item, 2)"
></el-button>
<el-button
type="text"
size="medium"
style="color: red;font-size: 14px;"
icon="el-icon-delete"
@click="del1(item.id,2)"
></el-button>
</div>
</li>
</ul>
<!-- <li
class="add"
v-if="current==index"
@click="add(2)"
style="padding-left: 40px;color: #409EFF;font-size:13px"
>
<img
src="../../assets/images/add-blue.png"
style="vertical-align: -1.3px;margin-right: 5px;"
/>新增大项
</li>-->
</ul>
<li
class="title"
style="
text-align: center;
line-height: 140px;
"
v-show="dataList.length == 0"
>
暂无数据
</li>
</div>
</vue-scroll>
</div>
<div class="system-right">
<div class="pageTitle">
小项库
<el-button
v-show="type == 3"
type="primary"
plain
size="small"
style="float: right; margin-top: -2px"
@click="add(3)"
>
<!-- <img
src="../../assets/images/add-blue.png"
style="vertical-align: -2px;margin-right: 5px;"
/> -->
新增检查小项
</el-button>
</div>
<div class="table_box" style="margin: 13px">
<el-table height="552px" :data="threeData" class="tables">
<el-table-column
type="index"
label="序号"
width="100"
align="center"
></el-table-column>
<el-table-column
prop="priorityName"
label="问题等级"
align="center"
>
</el-table-column>
<el-table-column
prop="content"
label="问题描述"
align="center"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
prop="remark"
label="整改要求"
align="center"
></el-table-column>
<el-table-column
prop="changeLimit"
label="整改时限(天)"
align="center"
></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button
@click="edit1(scope.row, 3)"
type="text"
size="small"
icon="el-icon-edit"
>
<span style="font-size: 14px">编辑</span>
</el-button>
<el-button
@click="del1(scope.row.id,3)"
type="text"
size="small"
style="color: red;"
icon="el-icon-delete"
>
<span style="font-size:14px">删除</span>
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
<el-dialog
class="dialig"
:title="title"
:modal-append-to-body="false"
:visible.sync="dialogVisible1"
width="30%"
>
<p>你确定要删除该项吗</p>
<div slot="footer" style="margin-top:0px;" class="dialog-footer">
<el-button size="medium" @click="dialogVisible1 = false"> </el-button>
<el-button size="medium" type="primary" @click="delSave1"> </el-button>
</div>
</el-dialog>
<el-dialog
:modal-append-to-body="false"
class="dialig"
:title="title"
:visible.sync="dialogVisible"
width="667px"
>
<div class="dialog_content">
<el-form
ref="form"
:model="dialogdata"
:rules="rules"
label-width="150px"
size="medium"
>
<el-form-item label="检查库名称" prop="dangerName">
<el-input v-model="dialogdata.dangerName"></el-input>
</el-form-item>
<el-form-item label="描述">
<el-input v-model="dialogdata.remark"></el-input>
</el-form-item>
<div class="dialog-footer">
<el-button
@click="dialogVisible = false"
size="medium"
icon="el-icon-circle-close"
> </el-button
>
<el-button
type="primary"
@click="editSave('form')"
:loading="isloading"
size="medium"
icon="el-icon-circle-check"
> </el-button
>
</div>
</el-form>
</div>
</el-dialog>
<el-dialog
class="dialig"
:title="title"
:modal-append-to-body="false"
:visible.sync="dialogVisible2"
width="667px"
>
<div class="dialog_content">
<el-form
ref="form"
:model="dialogdata"
:rules="rules"
label-width="150px"
size="medium"
>
<el-form-item label="大项名称" prop="dangerName">
<el-input v-model="dialogdata.dangerName"></el-input>
</el-form-item>
<el-form-item label="描述">
<el-input v-model="dialogdata.remark"></el-input>
</el-form-item>
</el-form>
<div class="dialog-footer">
<el-button
@click="dialogVisible2 = false"
size="medium"
icon="el-icon-circle-close"
> </el-button
>
<el-button
type="primary"
@click="editSave('form')"
:loading="isloading"
size="medium"
icon="el-icon-circle-check"
> </el-button
>
</div>
</div>
</el-dialog>
<el-dialog
class="dialig"
:title="title"
:modal-append-to-body="false"
:visible.sync="dialogVisible3"
width="667px"
>
<div class="dialog_content">
<el-form
ref="form2"
:model="dialogdata"
label-width="150px"
:rules="rules2"
size="medium"
>
<el-form-item label="问题等级" prop="level">
<el-select
v-model="dialogdata.level"
class="input"
placeholder="请选择"
style="width: 100%"
>
<el-option :value="1" label="1级"></el-option>
<el-option :value="2" label="2级"></el-option>
<el-option :value="3" label="3级"></el-option>
<el-option :value="4" label="4级"></el-option>
</el-select>
</el-form-item>
<el-form-item label="问题描述" prop="content">
<el-input v-model="dialogdata.content"></el-input>
</el-form-item>
<el-form-item label="整改要求">
<el-input v-model="dialogdata.remark"></el-input>
</el-form-item>
<el-form-item label="整改时限(天)" prop="changeLimit">
<el-input v-model="dialogdata.changeLimit"></el-input>
</el-form-item>
</el-form>
<div class="dialog-footer">
<el-button
@click="dialogVisible3 = false"
size="medium"
icon="el-icon-circle-close"
> </el-button
>
<el-button
type="primary"
@click="editSave('form2')"
:loading="isloading"
size="medium"
icon="el-icon-circle-check"
> </el-button
>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
// import moment from "moment";
import {
addDangerTypeRecordApi,
editDangerTypeRecordApi,
delDangerItemRecordApi,
delDangerTypeRecordApi,
getCompanyDangerTypeRecordApi,
addDangerItemRecordApi,
editDangerItemRecordApi,
getCompanyDangerItemRecordApi,
} from "@/assets/js/api/quality";
export default {
data() {
return {
isloading: false,
currentTwo: -1,
dialogVisible: false,
dialogVisible1: false,
dialogVisible2: false,
dialogVisible3: false,
current: -1,
dataList: [],
threeData: [],
editId: "",
title: "",
dialogdata: {
level: "",
remark: "",
dangerName: "",
parentId: "",
},
typeFa: "",
// typeSmallList:[],
// allTypelist:[],
// typeList: [
// { id: 1, name: "法律" },
// { id: 2, name: "行政法规" },
// { id: 3, name: "规章" },
// { id: 4, name: "其它公文" }
// ],
parentid: "",
parentid1: "",
type: 0,
ofThree: false,
threeIndex: -1,
rules: {
dangerName: [
{ required: true, message: "请输入名称", trigger: "blur" },
// { min: 10, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
},
rules2: {
level: [
{ required: true, message: "请选择问题等级", trigger: "change" },
],
content: [
{ required: true, message: "请输入问题描述", trigger: "blur" },
],
changeLimit: [
{ required: true, message: "请输入整改时限", trigger: "blur" },
],
},
secondId: "",
levelList: ["一级", "二级", "三级", "四级"],
};
},
mounted() {
this.loadList();
// this.loadType();
},
//列表加载
methods: {
// selectFa(val) {
// this.typeSmallList = this.allTypelist[val];
// },
// loadType(type) {
// let url = serverUrl + "/policy/list";
// this.$http.get(url, { params: {} }).then(res => {
// if (res.data.result) {
// this.allTypelist = res.data.data;
// // this.typeSmallList = res.data.data[type];
// } else {
// }
// });
// },
add(type, id) {
this.parentid1 = id;
this.type = type;
this.dialogdata = {};
if (this.type == 1) {
this.dialogVisible = true;
this.title = "新增检查库";
} else if (this.type == 2) {
this.dialogVisible2 = true;
this.title = "新增大项";
} else if (this.type == 3) {
this.dialogVisible3 = true;
this.title = "新增小项";
}
},
editSave(formName) {
let url;
let qs = require("qs");
this.$refs[formName].validate((valid) => {
if (valid) {
// this.isloading = true;
if (this.type == 1) {
this.dialogdata.sn = this.$store.state.userInfo.headquartersSn;
this.dialogdata.parentId = 0;
this.dialogdata.level = -1;
} else if (this.type == 2) {
this.dialogdata.sn = this.$store.state.userInfo.headquartersSn;
this.dialogdata.parentId = this.parentid1;
this.dialogdata.level = 0;
} else if (this.type == 3) {
this.dialogdata.dangerTypeId = this.parentid;
// this.dialogdata.level = 1;
this.dialogdata.priorityName = this.levelList[
this.dialogdata.level - 1
];
}
if (this.type == 1 || this.type == 2) {
if (this.title.indexOf("编辑") != -1) {
delete this.dialogdata.createTime
editDangerTypeRecordApi(this.dialogdata).then((res) => {
// this.isloading = false;
this.dialogVisible = false;
this.dialogVisible2 = false;
this.dialogVisible3 = false;
this.loadList();
this.$message.success("更新成功!");
});
} else {
addDangerTypeRecordApi(this.dialogdata).then((res) => {
this.isloading = false;
this.dialogVisible = false;
this.dialogVisible2 = false;
this.dialogVisible3 = false;
this.loadList();
this.$message.success("添加成功!");
});
}
} else {
if (this.title.indexOf("编辑") != -1) {
editDangerItemRecordApi(this.dialogdata).then((res) => {
this.isloading = false;
this.dialogVisible = false;
this.dialogVisible2 = false;
this.dialogVisible3 = false;
this.loadRigthtList();
this.$message.success("更新成功!");
});
} else {
addDangerItemRecordApi(this.dialogdata).then((res) => {
this.isloading = false;
this.dialogVisible = false;
this.dialogVisible2 = false;
this.dialogVisible3 = false;
this.loadRigthtList();
this.$message.success("添加成功!");
});
}
}
} else {
console.log("error submit!!");
return false;
}
});
},
edit1(data, type) {
data = JSON.parse(JSON.stringify(data));
this.type = type;
if (data.children) {
delete data["children"];
}
if (data.creatTime) {
delete data["creatTime"];
}
if (this.type == 1) {
this.dialogVisible = true;
this.title = "编辑检查库";
this.$nextTick(() => {
this.$refs.form.clearValidate();
});
} else if (this.type == 2) {
this.dialogVisible2 = true;
this.title = "编辑大项";
this.$nextTick(() => {
this.$refs.form.clearValidate();
});
} else if (this.type == 3) {
this.dialogVisible3 = true;
this.title = "编辑小项";
this.$nextTick(() => {
this.$refs.form2.clearValidate();
});
}
this.dialogdata = data;
},
delSave1() {
if(this.type == 3){
delDangerItemRecordApi({ id: this.editId }).then((res) => {
if (res.code == 200) {
this.$message({
message: '删除成功',
type: 'success',
});
this.loadList();
this.loadRigthtList()
} else {
this.$message({
message: '删除失败',
type: "error",
});
}
this.dialogVisible1 = false;
});
}else{
delDangerTypeRecordApi({ id: this.editId }).then((res) => {
if (res.code == 200) {
this.$message({
message: '删除成功',
type: 'success',
});
this.loadList();
this.loadRigthtList()
} else {
this.$message({
message: '删除失败',
type: "error",
});
}
this.dialogVisible1 = false;
});
}
// this.dialogVisible1 = false;
// this.$message({
// message: "删除成功",
// type: "success",
// });
// return;
// let url = "http://47.104.132.250:9000/itbgpv2/inspect/option/delete";
// this.$http.get(url, { params: { id: this.editId } }).then((res) => {
// if (res.data.result) {
// this.dialogVisible1 = false;
// this.$message({
// message: res.data.message,
// type: "error",
// });
// this.loadList();
// } else {
// this.$message({
// message: res.data.message,
// type: "error",
// });
// }
// });
},
del1(id, type) {
console.log('当前点击的id',id,'类型',type)
this.type = type;
this.title = "删除";
this.editId = id;
this.dialogVisible1 = true;
},
showThree(data, index) {
this.currentTwo = index;
this.type = 3;
this.threeIndex = index;
this.parentid = data.id;
this.ofThree = true;
// if (data.children.length != 0) {
this.threeData = data.children;
// }
},
handleNodeClick(data) {
console.log(data);
},
next2(item) {
this.secondId = item.id;
this.loadRigthtList();
},
next(index, $event, data, type) {
console.log("data", data);
this.currentTwo = -1;
//
if (this.current != index) {
this.threeIndex = -1;
}
this.threeData = [];
this.type = type;
this.parentid1 = data.id;
if (this.current == index) {
this.current = -1;
} else {
this.current = index;
}
},
loadList() {
let param = {
sn: this.$store.state.userInfo.headquartersSn,
// projectstage: ""
};
// this.loading=this.$loading({
// lock: true,
// text: "加载中",
// spinner: "el-icon-loading",
// background: "rgba(0, 0, 0, 0.7)"
// });
getCompanyDangerTypeRecordApi(param).then((res) => {
this.dataList = res.result;
// if(res.result.length>0){
// }
});
},
loadRigthtList() {
let param = {
dangerTypeId: this.secondId,
// projectstage: ""
};
// this.loading=this.$loading({
// lock: true,
// text: "加载中",
// spinner: "el-icon-loading",
// background: "rgba(0, 0, 0, 0.7)"
// });
getCompanyDangerItemRecordApi(param).then((res) => {
this.threeData = res.result;
// if(res.result.length>0){
// }
});
},
},
};
</script>
<style scoped lang="less">
.el-button--small,
.el-button--small.is-round {
padding: 6px 9px;
}
// .el-button--text {
// color: #409eff;
// background: 0 0;
// padding-left: 0;
// padding-right: 0;
// padding-top: 0px;
// font-size: 16px;
// }
// h1 {
// line-height: 22px;
// background-image: linear-gradient(
// 180deg,
// rgba(190, 229, 255, 0.35) 0%,
// rgba(81, 129, 246, 0.35) 100%
// );
// padding: 10px 10px 10px 15px;
// font-weight: bolder;
// font-size: 15px;
// letter-spacing: 1px;
// }
.block {
overflow: hidden;
// min-height: 660px;
// padding: 15px 20px;
height: calc(100% + 50px);
background-color: #f3f5fd;
.system-left {
float: left;
width: 330px;
padding: 20px 15px;
// min-height: 620px;
// margin-left: 1.5%;
height: calc(100% - 40px);
// border: 1px solid #e9e9e9;
background-color: white;
.treeList {
background-color: rgba(216, 216, 216, 0.2);
height: calc(100% - 42px) !important;
}
li {
cursor: pointer;
font-size: 16px;
line-height: 32px;
letter-spacing: 1px;
font-weight: bold;
.clickName {
// width: calc(100% - 145px);
.imgbox {
display: inline-block;
margin: 0 6px 0 13px;
color: black;
font-size: 14px;
opacity: 0.5;
}
}
}
li:hover,
.active {
// background: linear-gradient(270deg, white, #b7d8ff 100%);
background-color: rgba(81, 129, 246, 0.14);
color: @--color-primary;
}
#child {
li {
font-size: 15px;
padding-left: 39px;
font-weight: normal;
}
}
// .add:hover {
// background: white;
// }
// }
}
.system-right {
float: right;
// margin-right: 1.5%;
margin-left: 20px;
width: calc(100% - 360px - 20px - 30px);
// min-height: 620px;
height: calc(100% - 40px);
// border: 1px solid #e9e9e9;
background-color: white;
padding: 20px 15px;
}
}
</style>