<!-- 安全管理 ==> 风险分级管控 => 区域巡检(巡检任务)-->
|
<template>
|
<div>
|
<div class="main_header">
|
<div class="header_item">
|
<span class="header_label">巡检任务：</span>
|
<el-input size="mini" v-model="queryInfo.task" placeholder="请输入巡检任务" clearable></el-input>
|
</div>
|
<div class="header_item">
|
<span class="header_label">巡检人员：</span>
|
<el-input size="mini" v-model="queryInfo.realName" placeholder="请输入巡检人员" clearable></el-input>
|
</div>
|
<div class="header_item">
|
<el-button icon="el-icon-search" v-permission="'search'" @click="queryReset">查询</el-button>
|
<el-button icon="el-icon-plus" v-permission="'insert'" @click="addRow">新增</el-button>
|
</div>
|
</div>
|
<div class="main_content">
|
<cpn-table :table-index="true" :table-loading="tableConfig.loading" :table-data="tableConfig.tableData"
|
:table-columns="tableConfig.tableColumns" :page-total="tableConfig.total" :page-num.sync="queryInfo.pageNum"
|
:page-size.sync="queryInfo.pageSize" :page-change="pageChange">
|
</cpn-table>
|
</div>
|
<!-- dialog -->
|
<el-dialog width="400px" class="prop_dialog" v-if="isRenderDialog" :title="dialogTitle" :visible.sync="asyncVisible"
|
@close="closeForm">
|
|
<!-- <cpn-form :form-config="formConfig" :form-items="formConfig.formItems"></cpn-form> -->
|
|
<el-form class="rule_form" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto">
|
|
<el-form-item label="巡检任务:" prop="task">
|
<el-input v-model="ruleForm.task" placeholder="请输入巡检任务" clearable></el-input>
|
</el-form-item>
|
|
<el-form-item label="巡检标准:" prop="standard">
|
<el-input type="textarea" v-model="ruleForm.standard" placeholder="请输入巡检标准" clearable></el-input>
|
</el-form-item>
|
|
<el-form-item label="巡检人员:" prop="realNames">
|
<el-select v-model="ruleForm.realNames" multiple value-key="id" placeholder="请选择巡检人员">
|
<el-option v-for="item in allPersons" :key="item.id" :label="item.label" :value="item"></el-option>
|
</el-select>
|
</el-form-item>
|
|
<div class="divider"><span>巡检路线</span></div>
|
|
<el-form-item label-width="0" v-for="(itemP, index) in ruleForm.paths " :key="index" :prop="'paths.' +
|
index + '.value'" :rules="{ required: true, message: '请选择巡检路线', trigger: 'change' }">
|
<el-select style="margin-right: 10px;width: 323px;" v-model="itemP.value" value-key="id"
|
placeholder="请选择巡检路线">
|
<el-option v-for=" item in allPath" :key="item.id" :label="item.label" :value="item"></el-option>
|
</el-select>
|
<el-button class="delete_btn" @click="delPath(itemP)">删除</el-button>
|
<el-button class="table_btn" v-show="index === ruleForm.paths.length - 1"
|
@click="addPath">添加</el-button>
|
</el-form-item>
|
<!-- <el-form-item label="区域名称:" prop="regionHazardInformId">
|
<el-select v-model="ruleForm.regionHazardInformId" placeholder="请选择区域名称">
|
<el-option v-for="item in areaNames" :key="item.id" :label="item.region" :value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item> -->
|
</el-form>
|
<div slot="footer">
|
<el-button @click="asyncVisible = false">取 消</el-button>
|
<el-button class="submit_btn" @click="onSubmit('ruleForm')">提 交</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import {throttle} from '@/plugins/public'
|
import cpnTable from '@/components/element/Table'
|
// import cpnForm from '@/components/element/Form'
|
export default {
|
data() {
|
return {
|
isRenderDialog: false,
|
asyncVisible: false,
|
submitMode: '', // 提交方式: add / update
|
allPersons: [], // 巡检人员
|
allPath: [], // 巡检路线
|
queryInfo: {
|
pageNum: 1,
|
pageSize: 10,
|
task: '',
|
realName: '',
|
},
|
ruleForm: {
|
id: '',
|
task: '',
|
standard: '',
|
realNames: [],
|
paths: [
|
{value: ''},
|
],
|
},
|
rules: {
|
task: [{required: true, message: '请输入巡检任务', trigger: 'blur'}],
|
standard: [{required: true, message: '请输入巡检标准', trigger: 'blur'}],
|
realNames: [{required: true, message: '请选择巡检人员', trigger: 'change'}],
|
},
|
tableConfig: {
|
loading: '',
|
tableData: [],
|
tableColumns: [],
|
total: 0,
|
},
|
formConfig: {}
|
}
|
},
|
components: {
|
cpnTable,
|
// cpnForm,
|
},
|
computed: {
|
isUpdate() {
|
return this.submitMode === 'update'
|
},
|
dialogTitle() {
|
return this.isUpdate ? '修改巡检任务' : '新增巡检任务'
|
},
|
},
|
beforeCreate() {
|
this.$http = this.$api.Safety.RiskGrad.polling
|
},
|
created() {
|
this.setTableColumn()
|
this.setFormColumn()
|
this.getLists()
|
},
|
methods: {
|
// 获取table列表数据
|
getLists() {
|
let params = this.queryInfo
|
let tableConfig = this.tableConfig
|
tableConfig.loading = true
|
this.$http.getLists(params).then(res => {
|
if (res.statusMsg === 'ok') {
|
tableConfig.total = res.data.total
|
tableConfig.tableData = res.data.list
|
}
|
tableConfig.loading = false
|
})
|
},
|
// 获取管服人员数据(巡检人员)
|
getPerson() {
|
return new Promise(resolve => {
|
this.$api.Personnerl.SEARCHMORTGAGEELIST({
|
userType: 1,
|
pageNum: 1,
|
pageSize: 9999
|
}).then((res) => {
|
if (res.success) {
|
const list = res.data.list
|
const out = []
|
list.forEach(item => {
|
out.push({
|
id: item.userId,
|
label: item.realName,
|
})
|
})
|
this.allPersons.push(...out)
|
resolve()
|
}
|
})
|
})
|
},
|
// 获取巡检路线
|
getPath() {
|
new Promise(resolve => {
|
this.$api.Safety.RiskGrad.warning.getLists({
|
pageNum: 1,
|
pageSize: 9999
|
}).then((res) => {
|
if (res.success) {
|
const list = res.data.list
|
const out = []
|
list.forEach(item => {
|
out.push({
|
id: item.id,
|
label: item.region
|
})
|
})
|
this.allPath.push(...out)
|
resolve()
|
}
|
})
|
})
|
},
|
// 初始化 table 配置
|
setTableColumn() {
|
this.tableConfig.tableColumns = [
|
{index: true},
|
{name: "巡检任务", key: "task"},
|
{name: "巡检标准", key: "standard"},
|
{name: "巡检人员", key: "regionUsersList", formatter: row => row.realNames},
|
{
|
name: "巡检路线", align: 'left', key: "regions", formatter: row => {
|
return row.regions.replace(/,/g, ',\n')
|
}
|
},
|
{
|
name: "巡检状态", key: "status", width: 120, formatter: row => {
|
return row.status === 1 ? '已完成' : '待巡检'
|
}
|
},
|
{
|
operation: true, name: "操作", width: 140, value: [
|
{name: "修改", permission: "update", handleRow: this.updateRow},
|
{name: "删除", permission: "delete", handleRow: this.deleteRow},]
|
},
|
]
|
},
|
// 初始化 form 配置
|
setFormColumn() {
|
this.formConfig = {
|
formModels: {
|
task: '',
|
standard: '',
|
realNames: [],
|
},
|
formItems: [
|
{type: 'input', label: '巡检任务'},
|
{type: 'textarea', label: '巡检标准'},
|
{
|
type: 'select', label: '用户状态', options: this.allPersons,
|
}
|
// {
|
// type: 'datepicker', label: '创建时间', otherOptions: {
|
// startPlaceholder: '开始时间',
|
// endPlaceholder: '结束时间',
|
// type: 'daterange',
|
// 'unlink-panels': true
|
// }
|
// }
|
],
|
itemColLayout: {
|
span: 8
|
}
|
}
|
},
|
// 查询按钮列表信息
|
queryReset() {
|
this.queryInfo.pageNum = 1
|
this.queryInfo.pageSize = 10
|
this.getLists()
|
},
|
// 重置表单
|
resetForm(formName) {
|
this.$refs[formName].resetFields()
|
this.ruleForm.paths = [{value: ''}]
|
},
|
// 显示表单
|
async showForm() {
|
!this.allPath.length && this.getPath()
|
!this.allPersons.length && this.getPerson()
|
!this.isRenderDialog && (this.isRenderDialog = true)
|
this.asyncVisible = true
|
},
|
closeForm() {
|
this.resetForm('ruleForm')
|
this.asyncVisible = false
|
},
|
// 添加数据
|
addRow() {
|
this.submitMode = 'add'
|
this.showForm()
|
},
|
updateRow(row) {
|
this.submitMode = 'update'
|
this.showForm()
|
this.$nextTick(() => {
|
const {id, task, standard, regionUsersList, regionList} = row
|
const realNames = regionUsersList.map(item => {
|
return {
|
id: item.userId,
|
label: item.realName,
|
}
|
})
|
const paths = regionList.map(item => {
|
return {
|
value: {
|
id: item.regionHazardInformId,
|
label: item.region,
|
},
|
}
|
})
|
this.ruleForm = {
|
id,
|
task,
|
standard,
|
realNames,
|
paths,
|
}
|
})
|
},
|
deleteRow(row) {
|
const params = {id: row.id}
|
this.$confirm("该操作将删除该信息，是否继续删除?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}).then(() => {
|
this.$http.delete(params).then(res => {
|
if (res.statusMsg === 'ok') {
|
this.queryReset()
|
this.$message.success("删除成功！")
|
} else {
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
}).catch(() => {
|
this.$message.warning("您已取消")
|
})
|
|
},
|
// 提交表单
|
onSubmit: throttle(function (formName) {
|
this.$refs[formName].validate(valid => {
|
if (!valid) return
|
const {id, task, standard, realNames, paths} = this.ruleForm
|
const regionList = paths.map((item, index) => {
|
return {
|
sort: index + 1,
|
regionHazardInformId: item.value.id,
|
}
|
})
|
const regionUsersList = realNames.map(item => {
|
return {
|
userId: item.id,
|
}
|
})
|
const params = {
|
task,
|
standard,
|
regionList,
|
regionUsersList,
|
}
|
if (this.isUpdate) {
|
// 更新
|
params.id = id
|
this.$http.update(params).then((res) => {
|
if (res.statusMsg === 'ok') {
|
this.closeForm()
|
this.getLists()
|
this.$message.success('更新成功！')
|
} else {
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
} else {
|
// 添加
|
this.$http.insert(params).then((res) => {
|
if (res.statusMsg === 'ok') {
|
this.closeForm()
|
this.getLists()
|
this.$message.success('添加成功！')
|
} else {
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
}
|
})
|
}, 1000),
|
addPath() {
|
this.ruleForm.paths.push({
|
value: ''
|
})
|
},
|
delPath(item) {
|
var index = this.ruleForm.paths.indexOf(item)
|
if (index !== -1) {
|
this.ruleForm.paths.splice(index, 1)
|
}
|
},
|
pageChange() {
|
this.getLists()
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/style/layout-main.scss';
|
|
.divider {
|
position: relative;
|
margin-bottom: 30px;
|
text-indent: 10px;
|
color: #fff;
|
border-left: 3px solid #18F6F8;
|
|
&::after {
|
content: "";
|
position: absolute;
|
left: 0;
|
bottom: -8px;
|
width: 100%;
|
padding: 20px 0;
|
border-bottom: 1px solid #0C4D6F;
|
}
|
}
|
</style>
|
