需求：第一列变量名称支持模糊远程搜索；地址、数据类型值由变量名称选中带到页面，判断类型根据数据类型动态控制，告警值更具判断类型动态显示input框，此需求唯一用点时间开的发就是这里,保存时需要检验所有input必须输
保存、取消、编辑、删除功能
1 <template> 2 <div> 3 <div style="max- 100%; margin: 10px auto 0;"> 4 <a-table :columns="columns" :pagination="false" :rowKey="(record) => record.key" :data-source="data" bordered :scroll="{ y: 500 }"> 5 <!-- 变量名称 --> 6 <template slot="point_uniq" slot-scope="text, record"> 7 <div key="point_uniq" :class="record.status==='n' ? 'alarm': 'unAlarm'"> 8 <a-select 9 style=" 100%; margin: -5px 0;" 10 v-if="record.editable" 11 :value="text" 12 v-model="in_velocity" 13 allowClear 14 show-search 15 :default-active-first-option="false" 16 :show-arrow="false" 17 :filter-option="false" 18 :not-found-content="null" 19 @search="handleSearch" 20 placeholder="请输入搜索条件" 21 @change="(e) => handleChange(in_velocity, record.key, '','point_uniq',1)" 22 > 23 <a-select-option v-for="item in dataVelocity" :key="item.value" :value="item.cname"> 24 {{ item.cname }} 25 </a-select-option> 26 </a-select> 27 <template v-else> 28 {{ text }} 29 </template> 30 </div> 31 </template> 32 <!-- 地址 --> 33 <template slot="mouldbus" slot-scope="text, record"> 34 <div key="mouldbus"> 35 <a-input 36 disabled 37 v-if="record.editable" 38 style="margin: -5px 0;" 39 :value="text" 40 @change="(e) => handleChange(e.target.value, record.key, '','mouldbus')" 41 /> 42 <template v-else> 43 {{ text }} 44 </template> 45 </div> 46 </template> 47 <!-- 数据类型 --> 48 <template slot="dtype" slot-scope="text, record"> 49 <div key="dtype"> 50 <a-input 51 disabled 52 v-if="record.editable" 53 style="margin: -5px 0;" 54 :value="text" 55 @change="(e) => handleChange(e.target.value, record.key, '','dtype')" 56 /> 57 <template v-else> 58 {{ text }} 59 </template> 60 </div> 61 </template> 62 <!-- 判断规则 --> 63 <template slot="rule_type" slot-scope="text, record"> 64 <div key="rule_type"> 65 <a-select 66 style=" 100%; margin: -5px 0;" 67 v-if="record.editable" 68 :value="text" 69 v-model="ruleName" 70 allowClear 71 placeholder="请选择判断规则" 72 @change="(e) => handleChange(ruleName, record.key,'', 'rule_type')" 73 > 74 <a-select-option v-for="item in ruleList" :key="item.id" :value="item.name"> 75 {{ item.name }} 76 </a-select-option> 77 </a-select> 78 <template v-else> 79 {{ text }} 80 </template> 81 </div> 82 </template> 83 <!-- 告警值 --> 84 <template slot="warnData" slot-scope="text, record"> 85 <div key="warnData"> 86 <a-input 87 type="number" 88 min="0" 89 v-if="record.editable" 90 :class="record.alarmKey?'ATWO':'AONE'" 91 :value="record.warnData.A" 92 :placeholder="record.alarmKey?'最小值':'请输入告警值'" 93 @change="(e) => handleChange(e.target.value, record.key,record.warnData, 'A')" 94 /> 95 <span v-if="record.editable" v-show="record.alarmKey">-</span> 96 <a-input 97 v-show="record.alarmKey" 98 type="number" 99 min="0" 100 v-if="record.editable" 101 :class="record.alarmKey?'BTWO':'BONE'" 102 :value="record.warnData.B" 103 placeholder="最大值" 104 @change="(e) => handleChange(e.target.value, record.key,record.warnData, 'B')" 105 /> 106 <template v-else> 107 <span>{{ record.warnData.A}}</span> 108 <span v-show="record.alarmKey">-</span> 109 <span v-show="record.alarmKey">{{ record.warnData.B}}</span> 110 </template> 111 </div> 112 </template> 113 <!-- 告警文字 --> 114 <template slot="warn_text" slot-scope="text, record"> 115 <div key="warn_text"> 116 <a-input 117 v-if="record.editable" 118 style="margin: -5px 0;" 119 :value="text" 120 allowClear 121 placeholder="请输入告警值" 122 @change="(e) => handleChange(e.target.value, record.key, '','warn_text')" 123 /> 124 <template v-else> 125 {{ text }} 126 </template> 127 </div> 128 </template> 129 <template slot="operation" slot-scope="text, record"> 130 <div class="editable-row-operations"> 131 <span v-if="record.editable"> 132 <a href="javascript:;" @click="() => save(record)">保存</a> 133 <a href="javascript:;" @click="() => cancel(record.key)">取消</a> 134 </span> 135 <span v-else> 136 <a href="javascript:;" :disabled="editingKey !== ''" @click="() => edit(record.key)">编辑</a> 137 <a href="javascript:;" @click="() => onDelete(record)">删除</a> 138 </span> 139 </div> 140 </template> 141 </a-table> 142 <a-row type="flex" justify="center" class="video"> 143 <a href="javascript:;" :disabled="editingKey !== ''" @click="added()"> + 新增告警</a> 144 </a-row> 145 </div> 146 </div> 147 </template> 148 149 <script> 150 import { ParameterONE, ParameterTWO } from '@/utils/Enumeration' 151 import { 152 query_plc_point_list, 153 config_point_warn_rule, 154 query_point_warn_rule, 155 remove_point_warn_rule 156 } from '@/api/inlet' 157 import bus from '@/Bus' 158 const columns = [ 159 { 160 title: '变量名称', 161 dataIndex: 'point_uniq', 162 '23%', 163 ellipsis: true, 164 scopedSlots: { customRender: 'point_uniq' } 165 166 }, 167 { 168 title: '地址', 169 dataIndex: 'mouldbus', 170 // '40%', 171 ellipsis: true, 172 scopedSlots: { customRender: 'mouldbus' } 173 }, 174 { 175 title: '数据类型', 176 dataIndex: 'dtype', 177 '8%', 178 ellipsis: true, 179 scopedSlots: { customRender: 'dtype' } 180 }, 181 { 182 title: '判断规则', 183 dataIndex: 'rule_type', 184 '10%', 185 ellipsis: true, 186 scopedSlots: { customRender: 'rule_type' } 187 }, 188 { 189 title: '告警值', 190 dataIndex: 'warnData', 191 // '40%', 192 ellipsis: true, 193 scopedSlots: { customRender: 'warnData' } 194 }, 195 { 196 title: '告警文字', 197 dataIndex: 'warn_text', 198 '20%', 199 ellipsis: true, 200 scopedSlots: { customRender: 'warn_text' } 201 }, 202 { 203 title: '操作', 204 dataIndex: 'operation', 205 '8%', 206 scopedSlots: { customRender: 'operation' } 207 } 208 ] 209 export default { 210 name: 'Step2', 211 props: { 212 ID: { 213 type: String, 214 required: true 215 } 216 }, 217 data () { 218 // this.cacheData = data.map(item => ({ ...item })) 219 return { 220 in_velocity: undefined, 221 dataVelocity: [], 222 ruleName: undefined, 223 ruleList: [], // 规则 224 ParameterONE, // floatdint 225 ParameterTWO, // bool 226 227 uniq: '', 228 labelCol: { lg: { span: 5 }, sm: { span: 5 } }, 229 wrapperCol: { lg: { span: 19 }, sm: { span: 19 } }, 230 form: null, 231 loading: false, 232 timer: 0, 233 newTabIndex: 0, // 初始key值 234 // 表格 235 data: [], 236 columns, 237 editingKey: '' 238 } 239 }, 240 created () { 241 // 通过中央控件兄弟传值 242 }, 243 mounted () { 244 245 }, 246 methods: { 247 handleSearch (value) { 248 this.fetch(value, dataVelocity => (this.dataVelocity = dataVelocity), this.ID, this.dataVelocity) 249 }, 250 // 封装总调用接口 251 fetch (value, callback, id, dataArr) { 252 if (this.timeout) { 253 clearTimeout(this.timeout) 254 this.timeout = null 255 } 256 function fake () { 257 const str = { 258 pageNum: 1, 259 pageSize: 10, 260 point_cname: value, 261 puniq: id, 262 type: '1' 263 } 264 query_plc_point_list(str).then(res => { 265 if (res.code === '00000') { 266 const result = res.data.plcPoint_list 267 dataArr = [] 268 result.forEach(r => { 269 dataArr.push({ 270 value: r.uniq, 271 cname: r.cname, 272 mouldbus: r.mouldbus, 273 dtype: r.dtype 274 }) 275 }) 276 callback(dataArr) 277 } 278 }) 279 } 280 this.timeout = setTimeout(fake, 800) 281 }, 282 // 修改接口 283 pointInfo () { 284 const params = { 285 plc_uniq: this.ID 286 } 287 query_point_warn_rule(params).then((res) => { 288 if (res.code) { 289 let dataArr = [] 290 res.data.pointWarnRuleList.forEach(i => { 291 let C = '' 292 if (i.warn_data_u.length > 0) { 293 C = true 294 } else { 295 C = false 296 } 297 let D = '' 298 this.ParameterONE.map(j => { 299 if (j.id == i.rule_type) { 300 D = j.name 301 } 302 }) 303 dataArr.push({ 304 alarmKey: C, 305 key: i.id, 306 status: i.status, 307 warnData: { 308 A: i.warn_data, 309 B: i.warn_data_u 310 }, 311 point_uniq: i.point_cname, 312 mouldbus: i.mouldbus, 313 dtype: i.dtype, 314 rule_type: D, 315 warn_text: i.warn_text 316 }) 317 }) 318 this.data = dataArr 319 } 320 }) 321 }, 322 323 // 表格 324 handleChange (value, key, obj, column) { 325 const newData = [...this.data] 326 const target = newData.filter((item) => key === item.key)[0] 327 if (value) { 328 target.status = 's' 329 } 330 if (obj) { 331 obj[column] = value 332 target[column] = value 333 return 334 } 335 if (target) { 336 target[column] = value 337 this.dataVelocity.map(item => { 338 if (item.cname === value && column === 'point_uniq') { 339 target['mouldbus'] = item.mouldbus 340 target['dtype'] = item.dtype 341 // 根据数据类型赋值判断规则 342 if (item.dtype !== 'bool') { 343 this.ruleList = this.ParameterONE 344 } else { 345 this.ruleList = this.ParameterTWO 346 } 347 } 348 }) 349 if (target.rule_type === '区间外' || target.rule_type === '区间内') { 350 target.alarmKey = true 351 } else { 352 target.alarmKey = false 353 } 354 355 this.data = newData 356 } 357 }, 358 359 // 编辑 360 edit (key) { 361 this.in_velocity = undefined 362 this.dataVelocity = [] 363 const newData = [...this.data] 364 const target = newData.filter((item) => key === item.key)[0] 365 this.editingKey = key 366 if (target) { 367 target.editable = true 368 this.data = newData 369 } 370 // 保证在新增后编辑显示正常 371 this.data.map(item => { 372 if (item.key === key) { 373 this.handleSearch(item.point_uniq) 374 this.in_velocity = item.point_uniq || undefined 375 this.ruleName = item.rule_type || undefined 376 if (item.dtype == '') { 377 return false 378 } else if (item.dtype !== 'bool') { 379 this.ruleList = this.ParameterONE 380 } else { 381 this.ruleList = this.ParameterTWO 382 } 383 } 384 }) 385 }, 386 // 保存 387 save (record) { 388 const newData = [...this.data] 389 let key = record.key 390 391 let warnDataA = record.warnData.A 392 const { point_uniq, mouldbus, rule_type, warnData, warn_text } = record 393 if (!point_uniq || !mouldbus || !rule_type || !warnDataA || !warn_text) { 394 this.$message.warning('请填写完整信息。') 395 return false 396 } 397 if (rule_type == '等于' && warnData.A > 1) { 398 this.$message.warning('判断规则值为等于时，告警值应为0或1') 399 return false 400 } 401 if (rule_type != '等于' && warnData.B.length == 0) { 402 this.$message.warning('请填写完整信息。') 403 return false 404 } 405 const target = newData.filter((item) => key === item.key)[0] 406 let ruleID = '' 407 this.ParameterONE.map(item => { 408 if (item.name == target.rule_type) { 409 ruleID = item.id 410 } 411 }) 412 if (target) { 413 const params = { 414 dtype: target.dtype, 415 mouldbus: target.mouldbus, 416 point_cname: target.point_uniq, 417 rule_type: ruleID, 418 warn_data: target.warnData.A, 419 warn_data_u: target.warnData.B || '', 420 warn_text: target.warn_text, 421 id: '', 422 plc_uniq: this.ID 423 } 424 config_point_warn_rule(params).then(res => { 425 if (res.code === '00000') { 426 delete target.editable 427 this.data = newData 428 this.$message.success('保存成功') 429 } else { 430 this.$message.error(res.msg) 431 } 432 }) 433 } 434 this.editingKey = '' 435 }, 436 // 取消 437 cancel (key) { 438 const newData = [...this.data] 439 const target = newData.filter((item) => key === item.key)[0] 440 this.editingKey = '' 441 if (target) { 442 Object.assign(target, this.data.filter((item) => key === item.key)[0]) 443 delete target.editable 444 this.data = newData 445 } 446 // 重新调用接口 447 this.pointInfo() 448 }, 449 // 删除 450 onDelete (record) { 451 let ruleID = '' 452 this.ParameterONE.map(item => { 453 if (item.name == record.rule_type) { 454 ruleID = item.id 455 } 456 }) 457 const params = { 458 plc_uniq: this.ID, 459 dtype: record.dtype, 460 mouldbus: record.mouldbus, 461 point_cname: record.point_uniq, 462 rule_type: ruleID, 463 warn_text: record.warn_text, 464 warn_data: record.warnData.A, 465 warn_data_u: record.warnData.B || '' 466 } 467 // 后端接口删除 468 remove_point_warn_rule(params).then(res => { 469 if (res.code === '00000') { 470 // 前端页面删除 471 const data = [...this.data] 472 this.data = data.filter((item) => item.key !== record.key) 473 this.editingKey = '' 474 this.$message.success(res.msg) 475 } else { 476 this.$message.error(res.msg) 477 } 478 }) 479 }, 480 // 新增 481 added (val) { 482 this.in_velocity = undefined 483 this.dataVelocity = [] 484 this.ruleName = undefined 485 this.ruleList = [] 486 const activeKey = `newKey${this.newTabIndex++}` 487 this.data.push({ 488 alarmKey: false, 489 key: activeKey, 490 point_uniq: '', // 变量名称 491 mouldbus: '', // 地址 492 dtype: '', // 数据类型 493 rule_type: '', // 判断规则 494 warnData: { 495 A: '', 496 B: '' 497 }, // 告警值 498 warn_text: '' // 告警文字 499 500 }) 501 this.edit(activeKey) 502 } 503 }, 504 beforeDestroy () { 505 clearTimeout(this.timer) 506 // bus.$off() // 销毁每次的传值 507 } 508 } 509 </script> 510 511 <style lang="less" scoped> 512 .alarm { 513 color: #f03b3b; 514 } 515 516 .unAlarm { 517 color: rgba(0, 0, 0, 0.65); 518 } 519 520 .video { 521 padding: 3px 0; 522 border: 1px dotted #ccc; 523 margin-top: 3px; 524 525 // a { 526 // color: #1890ff; 527 // } 528 } 529 530 .editable-row-operations a { 531 margin-right: 8px; 532 } 533 534 .stepFormText { 535 margin-bottom: 24px; 536 537 .ant-form-item-label, 538 .ant-form-item-control { 539 line-height: 22px; 540 } 541 } 542 543 /deep/.ant-table-pagination.ant-pagination { 544 display: none; 545 } 546 547 .AONE { 548 width: 100%; 549 margin: -5px 0; 550 } 551 552 .ATWO { 553 width: 47%; 554 margin: -5px 0; 555 } 556 557 .BONE { 558 width: 0%; 559 margin: -5px 0; 560 } 561 562 .BTWO { 563 width: 47%; 564 margin: -5px 0; 565 } 566 </style>