|  |  | 
 |  |  | <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="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-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 { getFetchList } from '@/api/Inspection/ywPatrolPoint' | 
 |  |  | import { create } from '@/api/Inspection/ywPatrolLine' | 
 |  |  | 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 }, | 
 |  |  |   components: { GlobalWindow, Pagination,OperaYwPatrolPointWindow }, | 
 |  |  |   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: { | 
 |  |  |     editClick(row) { | 
 |  |  |         this.$refs.operaYwPatrolPointWindow.open('新建巡检点') | 
 |  |  |       // this.$refs.operaYwPatrolPointWindow.initData() | 
 |  |  |     }, | 
 |  |  |     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') | 
 |  |  |     } |