357 lines
9.4 KiB
Vue
357 lines
9.4 KiB
Vue
<template>
|
||
<div class="fullHeight">
|
||
<div class="searchBox whiteBlock">
|
||
<div>
|
||
<el-button type="primary" size="medium" @click="addCheckBtn">
|
||
{{ $t("message.safeManage.checkItemList.newInspection") }}
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="background whiteBlock">
|
||
<el-table
|
||
:data="tableData"
|
||
row-key="id"
|
||
:tree-props="{ children: 'children' }"
|
||
>
|
||
<!-- 检查项名称 -->
|
||
<el-table-column prop="checkname" :label="$t('message.safeMangeCheck.checkedProjectName')"> </el-table-column>
|
||
<!-- 操作 -->
|
||
<el-table-column :label="$t('message.safeMangeCheck.operate')" width="230" align="center">
|
||
<template slot-scope="scope">
|
||
<div class="flex2">
|
||
<el-button
|
||
class="operationText"
|
||
v-show="scope.row.parentId == 0"
|
||
size="small"
|
||
type="primary"
|
||
@click="addChildBtn(scope.row)"
|
||
><i class="el-icon-circle-plus"></i
|
||
>{{ $t("message.safeManage.checkItemList.subitem") }}
|
||
</el-button>
|
||
<img
|
||
src="@/assets/images/icon-edit.png"
|
||
width="15px"
|
||
height="15px"
|
||
class="icon"
|
||
style="margin: 0 10px 0 20px"
|
||
@click="editPoint(scope.row)"
|
||
/>
|
||
<img
|
||
src="@/assets/images/icon-delete.png"
|
||
width="15px"
|
||
height="15px"
|
||
class="icon"
|
||
style="margin: 0 10px"
|
||
@click="removePoint(scope.row)"
|
||
/>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
|
||
<!-- 新增检查项弹窗 -->
|
||
<el-dialog
|
||
:modal-append-to-body="false"
|
||
:title="title"
|
||
:visible.sync="dialogVisible"
|
||
width="667px"
|
||
:close-on-click-modal="false"
|
||
>
|
||
<div class="dialog_content">
|
||
<el-form
|
||
size="medium"
|
||
:model="form"
|
||
ref="checkForm"
|
||
label-width="110px"
|
||
class="dialogFormBox"
|
||
>
|
||
<el-form-item
|
||
:label="$t('message.safeManage.checkItemList.inspectionName')"
|
||
prop="checkname"
|
||
:rules="[{ required: true, message: $t('message.safeMangeCheck.placeholder'), trigger: 'blur' }]"
|
||
v-if="type == 1"
|
||
>
|
||
<el-input
|
||
v-model="form.checkname"
|
||
:placeholder="$t('message.safeManage.placeholder')"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 子项名称 -->
|
||
<el-form-item
|
||
v-else
|
||
:label="$t('message.safeMangeCheck.childProjectName')"
|
||
prop="checkname"
|
||
:rules="[{ required: true, message: $t('message.safeMangeCheck.placeholder'), trigger: 'blur' }]"
|
||
>
|
||
<el-input
|
||
v-model="form.checkname"
|
||
:placeholder="$t('message.safeManage.placeholder')"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<div class="dialog-footer">
|
||
<el-button
|
||
class="cancleBtn"
|
||
@click="dialogVisible = false"
|
||
icon="el-icon-circle-close"
|
||
size="medium"
|
||
>
|
||
<!-- 取 消 -->
|
||
{{$t('message.safeMangeCheck.cancel')}}
|
||
</el-button
|
||
>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-circle-check"
|
||
@click="addSaveBtn"
|
||
size="medium"
|
||
>
|
||
<!-- 确 定 -->
|
||
{{$t('message.safeMangeCheck.confirm')}}
|
||
</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
addCheckPointsApi,
|
||
getCheckPointsListApi,
|
||
editCheckPointsApi,
|
||
deleteCheckPointsApi
|
||
} from "@/assets/js/api/safeManage";
|
||
export default {
|
||
data() {
|
||
return {
|
||
projectSn: "",
|
||
dialogVisible: false,
|
||
type: 1, //新增检查项 1 ； 新增子项 2
|
||
addOrEdit: "add",
|
||
title: /* "新增检查项", */this.$t('message.safeMangeCheck.addNewCheckedProject'),
|
||
input: "",
|
||
form: {
|
||
checkname: "",
|
||
},
|
||
rulesForm: {},
|
||
tableData: [],
|
||
defaultProps: {
|
||
children: "children",
|
||
label: "label",
|
||
},
|
||
};
|
||
},
|
||
created() {
|
||
this.projectSn = this.$store.state.projectSn;
|
||
this.getListData();
|
||
},
|
||
methods: {
|
||
//获取列表数据
|
||
getListData() {
|
||
let data = {
|
||
projectSn: this.projectSn,
|
||
};
|
||
getCheckPointsListApi(data).then((res) => {
|
||
console.log(res);
|
||
if (res.code == 200) {
|
||
this.tableData = res.result;
|
||
}
|
||
});
|
||
},
|
||
|
||
//新增检查项按钮
|
||
addCheckBtn() {
|
||
this.dialogVisible = true;
|
||
this.type = 1;
|
||
this.title = /* "新增检查项"; */this.$t('message.safeMangeCheck.addNewCheckedProject')
|
||
this.form = {
|
||
checkname: "",
|
||
};
|
||
this.addOrEdit = "add";
|
||
},
|
||
|
||
//保存检查项
|
||
addSaveBtn() {
|
||
this.$refs.checkForm.validate((valid) => {
|
||
if (valid) {
|
||
let data = this.form;
|
||
data.sn = this.$store.state.userInfo.headquartersSn;
|
||
if (this.addOrEdit == "add") {
|
||
addCheckPointsApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.dialogVisible = false;
|
||
// "新增成功"
|
||
this.$message.success(this.$t('message.safeMangeCheck.addSuccess'));
|
||
this.getListData();
|
||
} else {
|
||
this.$message.error(res.message);
|
||
}
|
||
});
|
||
} else {
|
||
editCheckPointsApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.dialogVisible = false;
|
||
this.$message.success(this.$t('message.safeMangeCheck.addSuccess'));
|
||
this.getListData();
|
||
} else {
|
||
this.$message.error(res.message);
|
||
}
|
||
});
|
||
}
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
|
||
//新增子项按钮
|
||
addChildBtn(val) {
|
||
this.dialogVisible = true;
|
||
this.type = 2;
|
||
this.title = /* "新增子项"; */this.$t('message.safeMangeCheck.addNewChildrenProject')
|
||
this.form = {
|
||
checkname: "",
|
||
parentId: val.id,
|
||
};
|
||
this.addOrEdit = "add";
|
||
},
|
||
|
||
//编辑检查项
|
||
editPoint(val) {
|
||
this.dialogVisible = true;
|
||
this.addOrEdit = "edit";
|
||
if (val.parentId == 0) {
|
||
this.form = {
|
||
checkname: val.checkname,
|
||
id: val.id,
|
||
};
|
||
this.title =/* "编辑检查项"; */this.$t('message.safeMangeCheck.editCheckedProject')
|
||
this.type = 1;
|
||
} else {
|
||
this.form = {
|
||
checkname: val.checkname,
|
||
id: val.id,
|
||
parentId: val.parentId,
|
||
};
|
||
this.type = 2;
|
||
this.title = /* "编辑子项"; */this.$t('message.safeMangeCheck.editChildrenProject')
|
||
}
|
||
},
|
||
|
||
removePoint(val){
|
||
this.$confirm(this.$t('message.safeMangeCheck.dialog.confirmDelete'), this.$t('message.safeMangeCheck.dialog.tip'), {
|
||
confirmButtonText:/* '确定', */this.$t('message.safeMangeCheck.dialog.confirm'),
|
||
cancelButtonText: /* '取消', */this.$t('message.safeMangeCheck.dialog.cancel'),
|
||
type: 'warning'
|
||
}).then(() => {
|
||
let data = {
|
||
id:val.id
|
||
};
|
||
deleteCheckPointsApi(data).then(res=>{
|
||
if(res.code==200){
|
||
this.getListData();
|
||
this.$message({
|
||
type: 'success',
|
||
message: /* '删除成功!' */this.$t('message.safeMangeCheck.dialog.deleteSuccess'),
|
||
});
|
||
}else{
|
||
this.$message.error(res.message)
|
||
}
|
||
})
|
||
|
||
}).catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message:/* '已取消删除' */this.$t('message.safeMangeCheck.dialog.cancelDeleteSuccess'),
|
||
});
|
||
});
|
||
},
|
||
|
||
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.flex {
|
||
display: flex;
|
||
}
|
||
.flex2 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.background {
|
||
height: calc(100% - 94px);
|
||
padding: 15px 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.zdy-tree {
|
||
/*border: 1px solid #ccc;*/
|
||
|
||
.zdy-tree-title {
|
||
font-size: 16px;
|
||
padding: 16px 0 16px 30px;
|
||
// background-color: #fff !important;
|
||
}
|
||
|
||
> li {
|
||
//一级项
|
||
/*padding: 8px 0;*/
|
||
|
||
.el-icon-circle-plus {
|
||
margin-right: 5px;
|
||
}
|
||
> div {
|
||
.flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 8px 30px;
|
||
|
||
> p {
|
||
cursor: pointer;
|
||
position: relative;
|
||
|
||
> i {
|
||
position: absolute;
|
||
left: -15px;
|
||
top: 24%;
|
||
transform: translate(-15, -24%);
|
||
}
|
||
}
|
||
}
|
||
|
||
> ul {
|
||
padding-left: 30px;
|
||
padding-right: 30px;
|
||
// background-color: #F0F0F0;
|
||
|
||
> li {
|
||
//二级项
|
||
padding: 8px 0;
|
||
.flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
}
|
||
|
||
// > li:nth-child(odd) {
|
||
// background-color: #fff;
|
||
// }
|
||
|
||
> li:nth-child(even) {
|
||
background-color: #fbfbfb;
|
||
}
|
||
|
||
/*> li > div :hover {
|
||
background-color: #F5F7FA;
|
||
}*/
|
||
}
|
||
.icon {
|
||
cursor: pointer;
|
||
}
|
||
</style> |