|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <GlobalWindow :title="title" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm"> | 
|---|
|  |  |  | <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 /> | 
|---|
|  |  |  | 
|---|
|  |  |  | <div class="title">巡检点</div> | 
|---|
|  |  |  | <el-button type="primary" @click="openModal">添加巡检点</el-button> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <el-table v-loading="isWorking.search" :data="list" stripe> | 
|---|
|  |  |  | <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" @change="changeStatus" active-value="0" | 
|---|
|  |  |  | inactive-value="1"></el-switch> | 
|---|
|  |  |  | <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"> | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </el-form> | 
|---|
|  |  |  | <!--  --> | 
|---|
|  |  |  | <el-dialog title="添加巡检点" :close-on-click-modal="false" append-to-body :visible.sync="isShowModal" width="500px"> | 
|---|
|  |  |  | <el-select class="w400" v-model="selPoint" clearable multiple filterable> | 
|---|
|  |  |  | <el-dialog title="添加巡检点" :close-on-click-modal="false" append-to-body :visible.sync="isShowModal" width="780px"> | 
|---|
|  |  |  | <!-- <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-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-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> | 
|---|
|  |  |  | 
|---|
|  |  |  | <script> | 
|---|
|  |  |  | import BaseOpera from '@/components/base/BaseOpera' | 
|---|
|  |  |  | import GlobalWindow from '@/components/common/GlobalWindow' | 
|---|
|  |  |  | import { getFetchList } from '@/api/Inspection/ywPatrolPoint' | 
|---|
|  |  |  | import { create } from '@/api/Inspection/ywPatrolLine' | 
|---|
|  |  |  | 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 }, | 
|---|
|  |  |  | components: { GlobalWindow, Pagination }, | 
|---|
|  |  |  | data() { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | // 表单数据 | 
|---|
|  |  |  | 
|---|
|  |  |  | 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() { | 
|---|
|  |  |  | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | confirm() { | 
|---|
|  |  |  | const { form, list } = this | 
|---|
|  |  |  | if (list.length == 0) return Message.warning('请先选择巡检点') | 
|---|
|  |  |  | form.linePointList = list | 
|---|
|  |  |  | create({ ...form }).then(res => { | 
|---|
|  |  |  | if (res.code == 200) { | 
|---|
|  |  |  | Message.success('保存成功') | 
|---|
|  |  |  | this.close() | 
|---|
|  |  |  | 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() { | 
|---|
|  |  |  | getFetchList({}).then(res => { | 
|---|
|  |  |  | this.pointList = res || [] | 
|---|
|  |  |  | 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) | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | openModal() { | 
|---|
|  |  |  | this.selPoint = this.list.map(i => i.id) | 
|---|
|  |  |  | 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() { | 
|---|
|  |  |  | const { selPoint, pointList, list } = this | 
|---|
|  |  |  | if (selPoint.length == 0) return Message.warning('请先选择巡检点') | 
|---|
|  |  |  | let arr = [] | 
|---|
|  |  |  | // 取出选中列表 | 
|---|
|  |  |  | pointList.forEach(item => { | 
|---|
|  |  |  | selPoint.forEach(item2 => { | 
|---|
|  |  |  | if (item.id === item2) { | 
|---|
|  |  |  | arr.push(item) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | // 同list去重 | 
|---|
|  |  |  | list.forEach(item => { | 
|---|
|  |  |  | arr.forEach((item2, i) => { | 
|---|
|  |  |  | if (item.id === item2.id) { | 
|---|
|  |  |  | arr.splice(i, 1) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | // 添加 | 
|---|
|  |  |  | arr.forEach(i => { | 
|---|
|  |  |  | this.list.push({ | 
|---|
|  |  |  | needScancode: '1', | 
|---|
|  |  |  | pointName: i.name, | 
|---|
|  |  |  | pointId: i.id, | 
|---|
|  |  |  | code: i.code, | 
|---|
|  |  |  | id: i.id | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | // 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(){ | 
|---|
|  |  |  | close() { | 
|---|
|  |  |  | this.visible = false | 
|---|
|  |  |  | this.$emit('success') | 
|---|
|  |  |  | } | 
|---|