You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
345 lines
9.6 KiB
345 lines
9.6 KiB
<template>
|
|
<div class="body slider-right">
|
|
<div class="top-title">基础信息管理</div>
|
|
<div class="method-details-page">
|
|
<div class="flex justify-between items-center">
|
|
<span v-if="editTitle">
|
|
<el-input class="input" v-model="itemName"></el-input>
|
|
<i
|
|
class="el-icon-check cursor-pointer ml-4 font-16"
|
|
style="color: #409eff"
|
|
@click="handleSaveTitle"
|
|
></i>
|
|
</span>
|
|
<span v-else
|
|
>{{ itemName }}
|
|
<i
|
|
class="el-icon-edit cursor-pointer ml-4 font-16"
|
|
style="color: #409eff"
|
|
@click="editTitle = !editTitle"
|
|
></i
|
|
></span>
|
|
<el-button @click="$router.go(-1)" size="small">返回</el-button>
|
|
</div>
|
|
<div class="flex items-center mt-12">
|
|
<span class="flex-shrink-0 font-14">内容检索</span>
|
|
<el-input
|
|
style="width: 180px; margin-left: 12px"
|
|
v-model="searchVal"
|
|
placeholder="请输入"
|
|
/>
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
class="!ml-10"
|
|
@click="handleSearch"
|
|
>检索</el-button
|
|
>
|
|
</div>
|
|
<div class="table-box">
|
|
<el-row class="item-row">
|
|
<el-col :span="2">
|
|
<div class="item-row-content">序号</div>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<div class="item-row-content">检查项目</div>
|
|
</el-col>
|
|
<el-col :span="9">
|
|
<div class="item-row-content">问题描述</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div class="item-row-content item-row-content2">
|
|
<div class="title-1">问题等级</div>
|
|
<div class="flex w-full title-2">
|
|
<div class="w-33 justify-center flex items-center pt-4 pb-4">
|
|
一般
|
|
</div>
|
|
<div class="w-33 justify-center flex items-center pt-4 pb-4">
|
|
较重
|
|
</div>
|
|
<div class="flex-1 justify-center flex items-center pt-4 pb-4">
|
|
严重
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div class="item-row-content">操作</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row
|
|
class="item-row color-333"
|
|
v-for="(item, index) in questList"
|
|
:key="index"
|
|
>
|
|
<el-col :span="2">
|
|
<div class="item-row-content">{{ index + 1 }}</div>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<div class="item-row-content">{{ item.projectName }}</div>
|
|
</el-col>
|
|
<el-col :span="9">
|
|
<div class="item-row-content">
|
|
<el-input
|
|
v-if="item.edit"
|
|
v-model="item.content"
|
|
:maxlength="500"
|
|
></el-input>
|
|
<div v-else>{{ item.content }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div class="item-row-content item-row-content2">
|
|
<div class="flex w-full title-2 h-full">
|
|
<div class="w-33 text-center flex items-center p-10">
|
|
<el-input
|
|
v-if="item.edit"
|
|
v-model="item.sameGrade"
|
|
:maxlength="100"
|
|
></el-input>
|
|
<div v-else class="word-break">{{ item.sameGrade }}</div>
|
|
</div>
|
|
<div class="w-33 text-center flex items-center p-10">
|
|
<el-input
|
|
v-if="item.edit"
|
|
v-model="item.heavyGrade"
|
|
:maxlength="100"
|
|
></el-input>
|
|
<div v-else class="word-break">{{ item.heavyGrade }}</div>
|
|
</div>
|
|
<div class="flex-1 text-center flex items-center p-10">
|
|
<el-input
|
|
v-if="item.edit"
|
|
v-model="item.seriousGrade"
|
|
:maxlength="100"
|
|
></el-input>
|
|
<div v-else class="word-break">{{ item.seriousGrade }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div class="item-row-content">
|
|
<el-button
|
|
type="text"
|
|
v-if="index == questList.length - 1"
|
|
@click="handleAddNewItem"
|
|
>添加</el-button
|
|
>
|
|
<el-button type="text" v-if="!item.edit" @click="item.edit = true"
|
|
>修改</el-button
|
|
>
|
|
<el-button type="text" v-else @click="handleSaveItem(item)"
|
|
>保存</el-button
|
|
>
|
|
<el-button
|
|
type="text"
|
|
v-if="questList.length > 1"
|
|
@click="handleDelItem(item, index)"
|
|
>删除</el-button
|
|
>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
getSuperviseWayItemDetailsData,
|
|
getSuperviseWayItemDetailsListData,
|
|
addSuperviseWayItemDetailsItemData,
|
|
updateSuperviseWayItemDetailsItemData,
|
|
updateSuperviseWayItemData,
|
|
delSuperviseWayItemDetailsItemData,
|
|
} from "@/api/sluice";
|
|
export default {
|
|
data() {
|
|
return {
|
|
itemName: "",
|
|
editTitle: false,
|
|
searchVal: "",
|
|
questList: [],
|
|
};
|
|
},
|
|
created() {
|
|
this.initData();
|
|
},
|
|
methods: {
|
|
initData() {
|
|
getSuperviseWayItemDetailsData(this.$route.query.id).then((res) => {
|
|
this.itemName = res?.data?.name;
|
|
getSuperviseWayItemDetailsListData({
|
|
projectId: this.$route.query.id,
|
|
content: this.searchVal,
|
|
}).then((res2) => {
|
|
this.questList = res2.data.map((v) => {
|
|
return {
|
|
...v,
|
|
edit: false,
|
|
};
|
|
});
|
|
if (this.questList.length <= 0) {
|
|
this.questList.push({
|
|
projectName: this.itemName,
|
|
content: "",
|
|
sameGrade: "",
|
|
heavyGrade: "",
|
|
seriousGrade: "",
|
|
edit: true,
|
|
});
|
|
}
|
|
});
|
|
});
|
|
},
|
|
handleAddNewItem() {
|
|
this.questList.push({
|
|
projectName: this.itemName,
|
|
content: "",
|
|
sameGrade: "",
|
|
heavyGrade: "",
|
|
seriousGrade: "",
|
|
edit: true,
|
|
});
|
|
},
|
|
handleSaveItem(item) {
|
|
if (!item.content) {
|
|
this.$message.warning("请填写问题描述");
|
|
return;
|
|
}
|
|
if (item.id) {
|
|
updateSuperviseWayItemDetailsItemData({
|
|
...item,
|
|
projectName: this.itemName,
|
|
projectId: this.$route.query.id,
|
|
})
|
|
.then((res) => {
|
|
item.edit = false;
|
|
})
|
|
.catch(() => {
|
|
this.$message.error("修改失败");
|
|
});
|
|
} else {
|
|
addSuperviseWayItemDetailsItemData({
|
|
...item,
|
|
projectName: this.itemName,
|
|
projectId: this.$route.query.id,
|
|
})
|
|
.then((res) => {
|
|
if (res.data) {
|
|
item.id = res.data.id;
|
|
}
|
|
item.edit = false;
|
|
})
|
|
.catch(() => {
|
|
this.$message.error("保存失败");
|
|
});
|
|
}
|
|
},
|
|
// 删除问题项
|
|
handleDelItem(item) {
|
|
if (!item.id) {
|
|
this.questList = this.questList.filter((v) => v.id);
|
|
} else {
|
|
this.$confirm("是否删除该问题项", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
delSuperviseWayItemDetailsItemData(item.id).then((res) => {
|
|
this.questList = this.questList.filter((v) => v.id !== item.id);
|
|
});
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
},
|
|
handleSaveTitle() {
|
|
updateSuperviseWayItemData({
|
|
id: this.$route.query.id,
|
|
name: this.itemName,
|
|
}).then((res) => {
|
|
this.$message.success("修改成功");
|
|
this.editTitle = !this.editTitle;
|
|
this.questList.forEach((item) => {
|
|
item.projectName = this.itemName;
|
|
});
|
|
});
|
|
},
|
|
handleSearch() {
|
|
this.initData();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.body {
|
|
width: 100%;
|
|
min-height: calc(100vh - 56px);
|
|
padding-left: 24px;
|
|
|
|
.top-title {
|
|
height: 40px;
|
|
background-color: white;
|
|
display: flex;
|
|
padding-left: 16px;
|
|
align-items: center;
|
|
font-weight: 600;
|
|
}
|
|
.method-details-page {
|
|
margin-top: 20px;
|
|
background-color: #fff;
|
|
padding: 20px;
|
|
height: calc(100% - 16px);
|
|
.table-box {
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
margin-top: 12px;
|
|
.item-row {
|
|
display: flex;
|
|
.el-col {
|
|
box-sizing: border-box;
|
|
}
|
|
.item-row-content {
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.item-row-content2 {
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.title-1 {
|
|
width: 100%;
|
|
padding: 4px;
|
|
text-align: center;
|
|
border-bottom: 2px solid #ccc;
|
|
}
|
|
.title-2 {
|
|
// border-top: 1px solid #ccc;
|
|
& > *:nth-of-type(2) {
|
|
border-left: 2px solid #ccc;
|
|
border-right: 2px solid #ccc;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.input {
|
|
width: 200px;
|
|
}
|
|
.w-33 {
|
|
width: 33%;
|
|
}
|
|
|
|
.color-333 {
|
|
color: #333;
|
|
}
|
|
}
|
|
</style>
|
|
|