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.
399 lines
13 KiB
399 lines
13 KiB
1 year ago
|
<!-- 维修记录-堤防 -->
|
||
|
|
<script>
|
||
|
|
import { getDicts, postEmbankmentInspectionChecklist, postEmbankmentInspection, putEmbankmentInspection, deleteEmbankmentInspection, getEmbankmentInspectionCheck } from '@/api/management'
|
||
|
|
export default {
|
||
|
|
name: 'InspectionItems',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
searchInput: '',
|
||
|
|
searchType: 3,
|
||
|
|
dialogVisible: false,
|
||
|
|
ContentType: '',
|
||
|
|
firstType: [], // 一级检查内容类型
|
||
|
|
secondType: [], // 二级检查内容类型
|
||
|
|
examType: [], // 检查类型
|
||
|
|
tableData: [], // 检查列表
|
||
|
|
pageData: {
|
||
|
|
pageNum: 1, // 当前页
|
||
|
|
pageSize: 10, // 请求数量
|
||
|
|
pageSizes: [10, 20, 50, 100],
|
||
|
|
total: 0 // 总数量
|
||
|
|
},
|
||
|
|
ruleForm: {
|
||
|
|
name: '',
|
||
|
|
type: '0',
|
||
|
|
checkContentType: '',
|
||
|
|
items: [
|
||
|
|
],
|
||
|
|
},
|
||
|
|
rules: {
|
||
|
|
name: [
|
||
|
|
{ required: true, message: '请输入巡视检查名称', trigger: 'blur' },
|
||
|
|
{ max: 50, message: '名称最长为50个字符', trigger: 'blur' }
|
||
|
|
],
|
||
|
|
type: [
|
||
|
|
{ required: true, message: '请选择巡查类型', trigger: 'change' }
|
||
|
|
],
|
||
|
|
checkContentType: [
|
||
|
|
{ required: true, message: '请选择巡视检查内容', trigger: 'change' }
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 表格筛选
|
||
|
|
searchTableList() {
|
||
|
|
postEmbankmentInspectionChecklist({
|
||
|
|
data: {
|
||
|
|
timeView: {
|
||
|
|
timeField: "create_time"
|
||
|
|
},
|
||
|
|
type: this.searchType == 3 ? '' : this.searchType
|
||
|
|
},
|
||
|
|
cv: {
|
||
|
|
name: "name",
|
||
|
|
type: "like",
|
||
|
|
value: this.searchInput
|
||
|
|
},
|
||
|
|
pageSize: this.pageData.pageSize,
|
||
|
|
pageNum: this.pageData.pageNum
|
||
|
|
}).then((res) => {
|
||
|
|
if (res) {
|
||
|
|
this.tableData = res.records
|
||
|
|
this.pageData.total = res.total
|
||
|
|
}
|
||
|
|
console.log('🚀表格数据🚀', res)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 编辑巡查项目
|
||
|
|
editTableItem(row) {
|
||
|
|
getEmbankmentInspectionCheck(row.id).then((res) => {
|
||
|
|
console.log('🚀res🚀', res.data)
|
||
|
|
this.ruleForm = res.data
|
||
|
|
this.ruleForm.checkContentType = res.data.items[0].parts[0]
|
||
|
|
getDicts(res.data.items[0].parts[0]).then((res) => {
|
||
|
|
this.secondType = res.data
|
||
|
|
console.log('🚀一级🚀', res.data)
|
||
|
|
})
|
||
|
|
this.ruleForm.items.forEach(element => {
|
||
|
|
getDicts(element.parts[1]).then((res) => {
|
||
|
|
this.$set(element, 'third', res.data)
|
||
|
|
})
|
||
|
|
});
|
||
|
|
this.dialogVisible = true
|
||
|
|
console.log('🚀this.ruleForm🚀', this.ruleForm)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 删除对应巡查项目
|
||
|
|
deleteTableItem(row) {
|
||
|
|
deleteEmbankmentInspection(row.id).then((res) => {
|
||
|
|
console.log('🚀res🚀', res)
|
||
|
|
this.getTableData()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 新增巡查内容
|
||
|
|
addPatrolItem(checkContentType) {
|
||
|
|
console.log('🚀checkContentType🚀', checkContentType)
|
||
|
|
this.ruleForm.items.push(
|
||
|
|
{
|
||
|
|
content: '',
|
||
|
|
parts: [checkContentType, '', '']
|
||
|
|
}
|
||
|
|
)
|
||
|
|
},
|
||
|
|
// 新增巡查项目
|
||
|
|
newInspectionItems() {
|
||
|
|
this.dialogVisible = true
|
||
|
|
this.ruleForm = {
|
||
|
|
name: '',
|
||
|
|
type: '',
|
||
|
|
checkContentType: '',
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
content: '',
|
||
|
|
parts: ['', '', '']
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 删除对应巡查内容
|
||
|
|
deletePatrolItem(row) {
|
||
|
|
console.log('🚀row🚀', row)
|
||
|
|
},
|
||
|
|
// 改变一级巡视检查内容
|
||
|
|
changeContentType(dictValue) {
|
||
|
|
getDicts(dictValue).then((res) => {
|
||
|
|
this.secondType = res.data
|
||
|
|
console.log('🚀一级🚀', res.data)
|
||
|
|
})
|
||
|
|
this.ruleForm.items = [
|
||
|
|
{
|
||
|
|
content: '',
|
||
|
|
parts: [this.ruleForm.checkContentType]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
// 改变二级巡视检查内容
|
||
|
|
changeSecondType(row) {
|
||
|
|
getDicts(row.parts[1]).then((res) => {
|
||
|
|
console.log('🚀二级🚀', res.data)
|
||
|
|
row.parts[2] = ''
|
||
|
|
this.$set(row, 'third', res.data)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 改变三级巡视检查内容
|
||
|
|
changeThirdType(row) {
|
||
|
|
let value = row.third.find(item => item.dictValue == row.parts[2]).remark
|
||
|
|
if (value) {
|
||
|
|
row.content = value
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 保存巡查项目
|
||
|
|
submitForm(formName) {
|
||
|
|
this.$refs[formName].validate((valid) => {
|
||
|
|
if (valid) {
|
||
|
|
console.log(this.ruleForm);
|
||
|
|
if (this.ruleForm.id) {
|
||
|
|
putEmbankmentInspection(this.ruleForm).then(() => {
|
||
|
|
this.getTableData()
|
||
|
|
this.dialogVisible = false
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
postEmbankmentInspection(this.ruleForm).then(() => {
|
||
|
|
this.getTableData()
|
||
|
|
this.dialogVisible = false
|
||
|
|
})
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
console.log('校验不通过');
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
resetForm(formName) {
|
||
|
|
this.$refs[formName].resetFields();
|
||
|
|
this.dialogVisible = false
|
||
|
|
},
|
||
|
|
// 添加巡查项目
|
||
|
|
addInspectionItems() {
|
||
|
|
|
||
|
|
},
|
||
|
|
getTableData() {
|
||
|
|
this.searchInput = '',
|
||
|
|
this.searchType = 3,
|
||
|
|
postEmbankmentInspectionChecklist({
|
||
|
|
data: {
|
||
|
|
timeView: {
|
||
|
|
timeField: "create_time"
|
||
|
|
},
|
||
|
|
},
|
||
|
|
cv: {
|
||
|
|
name: "name",
|
||
|
|
type: "like"
|
||
|
|
},
|
||
|
|
pageSize: this.pageData.pageSize,
|
||
|
|
pageNum: this.pageData.pageNum
|
||
|
|
}).then((res) => {
|
||
|
|
if (res) {
|
||
|
|
this.tableData = res.records
|
||
|
|
this.pageData.total = res.total
|
||
|
|
}
|
||
|
|
console.log('🚀表格数据🚀', res)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
// 获取列表数据
|
||
|
|
this.getTableData()
|
||
|
|
// 获取巡查类型
|
||
|
|
getDicts('xs_classfy').then((res) => {
|
||
|
|
if (res.data && Array.isArray(res.data)) {
|
||
|
|
res.data.forEach(element => {
|
||
|
|
element.dictValue = Number(element.dictValue)
|
||
|
|
});
|
||
|
|
this.examType = res.data
|
||
|
|
}
|
||
|
|
})
|
||
|
|
// 获取一级数据
|
||
|
|
getDicts('df_xs_c_classfy').then((res) => {
|
||
|
|
if (res.data && Array.isArray(res.data)) {
|
||
|
|
this.firstType = res.data
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="body">
|
||
|
|
<div class="top-title">
|
||
|
|
基础信息管理
|
||
|
|
</div>
|
||
|
|
<div class="table-box">
|
||
|
|
<div class="top-search">
|
||
|
|
<span>巡视检查名称：</span>
|
||
|
|
<el-input class="search-input" v-model="searchInput" placeholder="请输入巡视检查名称" />
|
||
|
|
<span>巡查类型：</span>
|
||
|
|
<el-select v-model="searchType" placeholder="请选择">
|
||
|
|
<el-option v-for="item in examType" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
|
||
|
|
<el-option label="全部" :value="3"></el-option>
|
||
|
|
</el-select>
|
||
|
|
<el-button class="search-btn" type="success" @click="searchTableList()">搜索</el-button>
|
||
|
|
</div>
|
||
|
|
<el-button class="search-btn" style=" margin-right: 16px;margin-bottom: 8px; float: right;" type="success"
|
||
|
|
@click="newInspectionItems()">添加</el-button>
|
||
|
|
<el-table class="table" :data="tableData" border>
|
||
|
|
<el-table-column type="index" align="center" label="序号" width="100">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="name" align="center" label="巡视检查名称">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column align="center" label="巡查类型">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span v-if="examType.length > 0">{{ examType.find(item => item.dictValue == scope.row.type).dictLabel ||
|
||
|
|
''
|
||
|
|
}}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="createTime" align="center" sortable label="创建时间">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="updateTime" align="center" sortable label="更新时间">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="address" align="center" label="操作">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-button style=" margin-right: 16px;" @click="editTableItem(scope.row)" type="text"
|
||
|
|
size="small">编辑</el-button>
|
||
|
|
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
|
||
|
|
title="确定删除吗？" @confirm="deleteTableItem(scope.row)">
|
||
|
|
<el-button style="color: red;" type="text" size="small" slot="reference">删除</el-button>
|
||
|
|
</el-popconfirm>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<el-pagination background class="pagination" style="margin-top: 16px;margin-right: 16px;float: right;"
|
||
|
|
:current-page="pageData.pageNum" :page-sizes="pageData.pageSizes" layout="total, prev, pager, next, sizes, jumper"
|
||
|
|
:total="pageData.total" @size-change="getTableData()">
|
||
|
|
</el-pagination>
|
||
|
|
</div>
|
||
|
|
<el-dialog title="新增/编辑巡查项目" :visible.sync="dialogVisible" width="50%">
|
||
|
|
<div style="display: flex; margin-bottom: 16px;">
|
||
|
|
<div style="width: 5px; height: 16px; background-color: #31a08e; margin-right: 8px;"></div><span
|
||
|
|
style="font-weight: 600;">基础信息</span>
|
||
|
|
</div>
|
||
|
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
||
|
|
<el-form-item label-width="120px" label="巡视检查名称" prop="name">
|
||
|
|
<el-input style="width: 202px;" v-model="ruleForm.name"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label-width="120px" label="巡查类型" prop="type">
|
||
|
|
<el-select v-model="ruleForm.type" placeholder="请选择巡查类型">
|
||
|
|
<el-option v-for="item in examType" :label="item.dictLabel" :value="item.dictValue"
|
||
|
|
:key="item.id"></el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label-width="120px" label="巡视检查内容" prop="checkContentType">
|
||
|
|
<el-select v-model="ruleForm.checkContentType" @change="changeContentType(ruleForm.checkContentType)"
|
||
|
|
placeholder="请选择巡视检查内容">
|
||
|
|
<el-option v-for="item in firstType" :label="item.dictLabel" :value="item.dictValue"
|
||
|
|
:key="item.id"></el-option>
|
||
|
|
</el-select>
|
||
|
|
<span style="margin-left: 8px; color: red;">注意：切换选项后检查内容将会清空！</span>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<el-table class="table" height="350" :data="ruleForm.items" border>
|
||
|
|
<el-table-column type="index" align="center" label="序号" center width="80">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column align="center" label="检查项目和内容">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-select v-model="scope.row.parts[1]" @change="changeSecondType(scope.row)" placeholder="请选择检查项目和内容">
|
||
|
|
<el-option v-for="item in secondType" :label="item.dictLabel" :value="item.dictValue"
|
||
|
|
:key="item.id"></el-option>
|
||
|
|
</el-select>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column align="center" label="检查部位">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-select v-model="scope.row.parts[2]" @change="changeThirdType(scope.row)" placeholder="请选择检查部位">
|
||
|
|
<el-option v-for="item in scope.row.third" :label="item.dictLabel" :value="item.dictValue"
|
||
|
|
:key="item.id"></el-option>
|
||
|
|
</el-select>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column align="center" prop="inspectionContent" label="检查内容">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-input maxlength="500" v-model="scope.row.content"></el-input>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="address" align="center" label="操作">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-button style="margin-right: 8px;" v-if="scope.$index == ruleForm.items.length - 1"
|
||
|
|
@click="addPatrolItem(ruleForm.checkContentType)" type="text" size="small">添加</el-button>
|
||
|
|
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
|
||
|
|
title="确定删除吗？" @confirm="deletePatrolItem(scope.row)">
|
||
|
|
<el-button slot="reference" style="color: red;" type="text" size="small">删除</el-button>
|
||
|
|
</el-popconfirm>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<div slot="footer" class="dialog-footer">
|
||
|
|
<el-button size="mini" @click="resetForm('ruleForm')">取 消</el-button>
|
||
|
|
<el-button size="mini" type="primary" @click="submitForm('ruleForm')">保存</el-button>
|
||
|
|
</div>
|
||
|
|
</el-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="less">
|
||
|
|
.body {
|
||
|
|
width: 100%;
|
||
|
|
min-height: calc(100vh - 56px);
|
||
|
|
margin-left: 24px;
|
||
|
|
|
||
|
|
.top-title {
|
||
|
|
height: 40px;
|
||
|
|
background-color: white;
|
||
|
|
display: flex;
|
||
|
|
padding-left: 16px;
|
||
|
|
align-items: center;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-box {
|
||
|
|
width: 100%;
|
||
|
|
min-height: calc(100vh - 56px - 64px);
|
||
|
|
margin-top: 24px;
|
||
|
|
padding: 16px;
|
||
|
|
background-color: white;
|
||
|
|
|
||
|
|
.top-search {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
|
||
|
|
.search-input {
|
||
|
|
width: 300px;
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-btn {
|
||
|
|
margin-left: 10px;
|
||
|
|
background-color: #37b29e;
|
||
|
|
border: none;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: #5ac6b9;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:active {
|
||
|
|
background-color: #2b8070;
|
||
|
|
}
|
||
|
|
|
||
|
|
;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table {
|
||
|
|
height: calc(680px - 34px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|