<template>
|
<GlobalWindow width="800px" :title="title" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm">
|
<el-form :model="form" ref="form" :rules="rules">
|
<el-form-item label="线路名称" prop="name">
|
<el-input v-model="form.name" placeholder="请输入线路名称" v-trim />
|
</el-form-item>
|
<div class="head">
|
<div class="title">巡检点</div>
|
<el-button type="primary" @click="openModal">添加巡检点</el-button>
|
</div>
|
<el-table :data="list" stripe>
|
<el-table-column prop="code" label="巡检点编码" min-width="100px"></el-table-column>
|
<el-table-column prop="pointName" label="巡检点名称" min-width="100px"></el-table-column>
|
<el-table-column prop="name" label="扫码打卡" min-width="100px">
|
<template v-slot="scope">
|
<el-switch v-model="scope.row.needScancode" :disabled="true" @change="changeStatus" :active-value="0"
|
:inactive-value="1"></el-switch>
|
</template>
|
</el-table-column>
|
<el-table-column prop="name" label="排序码" min-width="100px">
|
<template v-slot="scope">
|
<el-input v-model="scope.row.sortnum" class="w100"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="name" label="操作" min-width="100px">
|
<template v-slot="scope">
|
<span class="red cu" @click="handleDel(scope)">删除</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
|
</el-form>
|
<!-- -->
|
<el-dialog title="添加巡检点" :close-on-click-modal="false" append-to-body :visible.sync="isShowModal" width="880px">
|
<!-- <el-select class="w400" v-model="selPoint" clearable multiple filterable>
|
<el-option v-for="item in pointList" :value="item.id" :label="item.name"></el-option>
|
</el-select> -->
|
<el-form ref="searchForm" :model="searchForm" label-width="80px" inline>
|
<el-form-item label="巡检点" prop="name">
|
<el-input v-model="searchForm.name" placeholder="请输入巡检点名称/编码" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="巡检区域">
|
<el-cascader v-model="searchForm.areaIds" @change="changeSel" placeholder="请选择巡检区域" clearable
|
:options="areaList" :props="{
|
label: 'name',
|
value: 'id',
|
children: 'childCategoryList'
|
}"></el-cascader>
|
</el-form-item>
|
<el-button type="primary" @click="initData">搜索</el-button>
|
<el-button @click="reset">重置</el-button>
|
<el-button type="primary" @click="editClick()" icon="el-icon-plus"
|
v-permissions="['business:ywpatrolpoint:create']">新建巡检点</el-button>
|
</el-form>
|
|
<el-table @selection-change="handleSelectionChange" v-loading="isWorking.search" :data="pointList" stripe>
|
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column prop="code" label="巡检点编码" min-width="100px"></el-table-column>
|
<el-table-column prop="name" label="巡检点名称" min-width="100px"></el-table-column>
|
<el-table-column prop="deviceName" label="关联设备" min-width="100px"></el-table-column>
|
<el-table-column prop="areaName" label="巡检区域" min-width="100px"></el-table-column>
|
</el-table>
|
<pagination class="mt10" @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="pagination">
|
</pagination>
|
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="isShowModal = false">取 消</el-button>
|
<el-button type="primary" @click="subModal">确 定</el-button>
|
</span>
|
</el-dialog>
|
<OperaYwPatrolPointWindow ref="operaYwPatrolPointWindow" @success="handlePageChange" />
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import OperaYwPatrolPointWindow from '@/views/Inspection/components/OperaYwPatrolPointWindow'
|
import Pagination from '@/components/common/Pagination'
|
import { fetchList as getFetchList } from '@/api/Inspection/ywPatrolPoint'
|
import { create, updateById, detailById } from '@/api/Inspection/ywPatrolLine'
|
import { Message } from 'element-ui'
|
import { fetchList } from '@/api/business/category'
|
export default {
|
name: 'OperaYwPatrolLineWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow, Pagination,OperaYwPatrolPointWindow },
|
data() {
|
return {
|
// 表单数据
|
form: {
|
name: '',
|
},
|
selPoint: [],
|
|
pointList: [],
|
selList: [],
|
areaList: [],
|
searchForm: {
|
name: '',
|
areaId: '',
|
areaIds: []
|
},
|
pagination: {
|
pageSize: 10,
|
page: 1,
|
total: 0
|
},
|
|
list: [],
|
isWorking: false,
|
isShowModal: false,
|
// 验证规则
|
rules: {
|
name: [{ required: true, message: '请输入' }],
|
selPoint: [{ type: 'array', required: true, message: '请输入' }],
|
},
|
}
|
},
|
created() {
|
this.config({
|
api: '/Inspection/ywPatrolLine',
|
})
|
},
|
methods: {
|
editClick(row) {
|
this.$refs.operaYwPatrolPointWindow.open('新建巡检点')
|
// this.$refs.operaYwPatrolPointWindow.initData()
|
},
|
confirm() {
|
const { form, list } = this
|
this.$refs['form'].validate((valid) => {
|
if (valid) {
|
if (list.length == 0) return Message.warning('请先选择巡检点')
|
form.linePointList = list
|
this.isWorking = true
|
let fn = form.id ? updateById : create
|
fn({ ...form }).then(res => {
|
Message.success('保存成功')
|
this.isWorking = false
|
this.close()
|
}, () => {
|
this.isWorking = false
|
})
|
}
|
})
|
|
},
|
getDetail(row) {
|
detailById(row.id).then(res => {
|
this.form = res
|
this.list = res.linePointList || []
|
})
|
},
|
getProject() {
|
fetchList({
|
model: { type: 4 },
|
capacity: 1000,
|
page: 1,
|
}).then(res => {
|
this.areaList = res.records || []
|
})
|
},
|
initData() {
|
const { searchForm, pagination } = this
|
getFetchList({
|
page: pagination.page,
|
capacity: pagination.pageSize,
|
model: { ...searchForm }
|
}).then(res => {
|
this.pointList = res.records || []
|
this.pagination.total = res.total
|
})
|
},
|
handleSelectionChange(val) {
|
this.selList = val
|
},
|
reset() {
|
this.searchForm = {
|
name: '',
|
areaId: '',
|
areaIds: []
|
}
|
this.initData()
|
},
|
handleSizeChange(val) {
|
this.pagination.pageSize = val
|
this.initData()
|
},
|
handlePageChange(val) {
|
this.pagination.page = val
|
this.initData()
|
},
|
handleDel(row) {
|
this.list.splice(row.$index, 1)
|
|
},
|
changeStatus(row) {
|
|
},
|
openModal() {
|
this.getProject()
|
this.reset()
|
this.isShowModal = true
|
},
|
changeSel(e) {
|
if (e && e.length == 1) {
|
} else if (e && e.length == 2) {
|
this.$set(this.searchForm, 'areaId', e[1])
|
} else {
|
}
|
this.initData()
|
},
|
subModal() {
|
// this.list = this.selList.map(item => {
|
// return {
|
// needScancode: 0,
|
// pointName: item.name,
|
// pointId: item.id,
|
// code: item.code
|
// }
|
// })
|
this.selList.forEach(item => {
|
const index = this.list.findIndex(i => i.code === item.code)
|
if (index === -1) {
|
this.list.push({
|
needScancode: 0,
|
pointName: item.name,
|
pointId: item.id,
|
code: item.code
|
})
|
}
|
})
|
this.isShowModal = false
|
},
|
close() {
|
this.visible = false
|
this.$emit('success')
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.head {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 20px;
|
|
div {
|
font-weight: 500;
|
}
|
}
|
</style>
|
