edit-dialog.vue 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724
  1. <template>
  2. <a-modal v-model="visible" title="选择编辑" width="1200px" class="edit-dialog" @cancel="handleCancel">
  3. <template slot="footer">
  4. <a-button key="back" @click="handleCancel">
  5. 取消
  6. </a-button>
  7. <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
  8. 确认
  9. </a-button>
  10. </template>
  11. <div class="dialog-content">
  12. <div class="left">
  13. <div class="header">
  14. <div class="select">
  15. <a-select style="width: 236px;margin: 0 10px" :default-value="majorId">
  16. <a-select-opt-group>
  17. <span slot="label">位置区域</span>
  18. <a-select-option v-for="item in locationList" :value="item.id"
  19. @click="handleChange(item)">
  20. {{item.name}}
  21. </a-select-option>
  22. <a-select-opt-group>
  23. <span slot="label">设备设施</span>
  24. <a-select-option v-for="item in majorList" :value="item.id" @click="handleChange(item)">
  25. {{item.name}}
  26. </a-select-option>
  27. </a-select-opt-group>
  28. </a-select-opt-group>
  29. </a-select>
  30. <!-- <Select style="margin: 0 10px"-->
  31. <!-- v-model="majorId"-->
  32. <!-- @change="handleMajor"-->
  33. <!-- :hideClear='true'-->
  34. <!-- :selectdata="majorList"-->
  35. <!-- :placeholder="'请选择'"-->
  36. <!-- class="search-select"-->
  37. <!-- width="236" isReadOnly-->
  38. <!-- />-->
  39. </div>
  40. <div class="search">
  41. <Select
  42. v-model="floorId"
  43. caption="所属楼层:"
  44. @change="chageFloor"
  45. :hideClear='false'
  46. :selectdata="dataFloor"
  47. :placeholder="'请选择'"
  48. class="search-select"
  49. width="236"
  50. />
  51. <a-input-search placeholder="搜索位置名称" class="press-enter" @search="onSearch" v-model="keyword"/>
  52. </div>
  53. </div>
  54. <div class="tree" >
  55. <a-spin :spinning="spinning">
  56. <a-input-search placeholder="请输入关键字" v-if="majorId||sysId" style="width: 235px;margin: 10px 10px;" v-model="selectVal" @search="onSearchTree" />
  57. <Tree @change="getTreeId" :data="treeData"/>
  58. </a-spin>
  59. </div>
  60. <div class="checkbox">
  61. <a-table :pagination="false" :row-key='typeEdit=="Zone"?"location":"assetnum"'
  62. :columns="typeEdit=='Image'?columnsSys:typeEdit=='Zone'?columnsLocal:objSys"
  63. :data-source="tableData"
  64. :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange,onSelect:onSelect }"
  65. :scroll="{ y: 340 }" :loading="loading"/>
  66. <a-pagination v-if="total>0" v-model="page" :total="total" show-less-items
  67. style="margin-left: auto;" @change="handleTableChange"/>
  68. </div>
  69. </div>
  70. <div class="right">
  71. <div class="header">
  72. <span class="select-number">已选择 <b>{{arrList.length}}</b>/{{sysNum}}</span>
  73. <a-button type="link" class="link" @click="clearArrList" :disabled="arrList.length==0">清空</a-button>
  74. </div>
  75. <div class="list-box">
  76. <p v-for="(item,index) in arrList" :key="index" class="list">{{item.sbjc||item.wzjc}}
  77. <a-icon type="close" class="icon" @click="deleteItem(item,index)"/>
  78. </p>
  79. </div>
  80. </div>
  81. </div>
  82. </a-modal>
  83. </template>
  84. <script>
  85. import searchTree from "@/components/edit/search_tree";
  86. import {
  87. queryGlsmsasset,
  88. getQuerySmsxt,
  89. getPlazaFloor,
  90. getQuerySmsxtBy,
  91. queryWzfldl,
  92. queryWzflByDl,
  93. queryGlsmsLocation
  94. } from "@/api/editer";
  95. import bus from "@/bus";
  96. import {getUrlMsg} from '@/components/urlMsg.js'
  97. export default {
  98. name: "edit-dialog",
  99. components: {searchTree},
  100. props: {
  101. sysNum: Number,//设备总数
  102. attrCards: Array,
  103. getmajorId: String,
  104. InfoLocal: Array
  105. },
  106. computed: {
  107. majorId() {
  108. return this.getmajorId || ''
  109. }
  110. },
  111. data() {
  112. return {
  113. spinning:false,
  114. loading: false,
  115. visible: false,
  116. model: 'test1',
  117. searchName: '',
  118. floorId: "",//所属楼层
  119. dataFloor: [],
  120. plainOptions: ['福建三明万达-供电系统-6楼-工程信息化中的区域编码ND182472e83742', '福建三明万达-供电系统-6楼-工程信息化中的区域编码ND18247283742'],
  121. majorList: [],
  122. locationList: [],
  123. checkedList: [],
  124. keyword: '',
  125. classstructureid: '',
  126. locfl: '',
  127. objSys: [
  128. {
  129. title: '对象名称',
  130. dataIndex: 'sbjc',
  131. key: 'sbjc',
  132. width: '75%',
  133. scopedSlots: {customRender: 'sbjc'},
  134. },
  135. {
  136. title: '对象内码',
  137. dataIndex: 'sbjbm',
  138. key: 'sbjbm',
  139. width: '25%',
  140. },
  141. ],
  142. columnsSys: [
  143. {
  144. title: '设备名称',
  145. dataIndex: 'sbjc',
  146. key: 'sbjc',
  147. width: '75%',
  148. scopedSlots: {customRender: 'sbjc'},
  149. },
  150. {
  151. title: '设备内码',
  152. dataIndex: 'sbjbm',
  153. key: 'sbjbm',
  154. width: '25%',
  155. },
  156. ],
  157. columnsLocal: [
  158. {
  159. title: '位置名称',
  160. dataIndex: 'wzjc',
  161. key: 'wzjc',
  162. width: '75%',
  163. scopedSlots: {customRender: 'wzjc'},
  164. },
  165. {
  166. title: '位置内码',
  167. dataIndex: 'location',
  168. key: 'location',
  169. width: '25%',
  170. },
  171. ],
  172. tableData: [],
  173. loading: false,
  174. page: 1,
  175. size: 10,
  176. treeData: [],
  177. total: 0,
  178. selectedRowKeys: [],
  179. arrList: [],
  180. selectList: [],
  181. typeEdit: '',
  182. selectVal:'',
  183. sysId:''
  184. }
  185. },
  186. watch: {
  187. floorId(val) {
  188. if (val == '') {
  189. this.queryGlsmsasset();
  190. }
  191. },
  192. selectVal(val){
  193. if(val==''){
  194. if(this.sysId!=''){
  195. this.getQuerySmsxtBy(this.sysId, this.typeEdit)
  196. }else{
  197. this.getQuerySmsxtBy(this.majorId,'Image')
  198. }
  199. }
  200. }
  201. },
  202. methods: {
  203. showModal() {
  204. this.visible = true;
  205. },
  206. handleOk(e) {
  207. this.loading = true;
  208. setTimeout(() => {
  209. this.visible = false;
  210. this.loading = false;
  211. const lists = [];
  212. let arr = [];
  213. arr = JSON.parse(JSON.stringify(this.arrList))
  214. arr.map(item => {
  215. if (item.wzjc) {
  216. lists.push({id: item.location || item.assetnum, name: item.wzjc || item.sbjc, type: 'Zone'})
  217. }
  218. if (item.sbjc) {
  219. lists.push({
  220. id: item.location || item.assetnum,
  221. name: item.wzjc || item.sbjc,
  222. type: 'Image'
  223. })
  224. }
  225. })
  226. console.log(lists);
  227. bus.$emit('changeAttachObjectIds', lists)
  228. bus.$emit('updateAttachMsg', lists)
  229. }, 1000);
  230. },
  231. handleCancel(e) {
  232. this.visible = false;
  233. let arr = [];
  234. const lists = [];
  235. console.log(this.selectList);
  236. arr = JSON.parse(JSON.stringify(this.selectList))
  237. arr.map(item => {
  238. if (item.wzjc) {
  239. lists.push({id: item.location || item.assetnum, name: item.wzjc || item.sbjc, type: 'Zone'})
  240. }
  241. if (item.sbjc) {
  242. lists.push({id: item.location || item.assetnum, name: item.wzjc || item.sbjc, type: 'Image'})
  243. }
  244. })
  245. console.log(lists);
  246. bus.$emit('changeAttachObjectIds', lists)
  247. },
  248. onSearch(value) {
  249. this.queryGlsmsasset()
  250. },
  251. ChangeCheckbox(val) {
  252. console.log(val)
  253. },
  254. handleChange(val) {
  255. console.log(val);
  256. this.selectVal='';
  257. this.tableData = [];
  258. this.typeEdit = val.type;
  259. this.sysId = val.id;
  260. this.getQuerySmsxtBy(val.id, val.type)
  261. },
  262. handleMajor(val) {
  263. this.tableData = [];
  264. this.getQuerySmsxtBy(val.id)
  265. },
  266. chageFloor(data) {
  267. this.queryGlsmsasset();
  268. },
  269. pressEnter(e) {
  270. console.log(e)
  271. },
  272. //获取treeId --classstructureid
  273. onSearchTree(val){
  274. let arr = [];
  275. const reg = new RegExp(val, 'g');
  276. let flag= false;
  277. if(this.typeEdit=='Zone'){
  278. this.treeData.map((item)=>{
  279. if(item.name.indexOf(val)!=-1){
  280. item.name=item.name.replace(reg, `<span style="color:#F96600">${val}</span>`);
  281. arr.push(item)
  282. }
  283. });
  284. }
  285. if(this.typeEdit=='Image'){
  286. console.log(this.treeData);
  287. this.treeData.map(item=>{
  288. if(item.name.indexOf(val)!=-1){
  289. item.name=item.name.replace(reg, `<span style="color:#F96600">${val}</span>`);
  290. arr.push(item)
  291. }else{
  292. item.children.map(item1=>{
  293. if(item1.name.indexOf(val)!=-1){
  294. flag = true;
  295. item.open=true;
  296. item1.name=item1.name.replace(reg, `<span style="color:#F96600">${val}</span>`);
  297. }
  298. })
  299. if(flag){
  300. arr.push(item)
  301. }
  302. }
  303. })
  304. }
  305. this.treeData = arr;
  306. },
  307. getTreeId(id) {
  308. if (this.typeEdit == 'Image') {
  309. this.classstructureid = id.id;
  310. } else if (this.typeEdit == 'Zone') {
  311. this.locfl = id.id;
  312. }
  313. this.queryGlsmsasset();
  314. },
  315. //获取表格数据
  316. queryGlsmsasset() {
  317. if (!this.classstructureid && !this.locfl) {
  318. return
  319. }
  320. const data = {
  321. plazaId: getUrlMsg().projectId,//广场id 必填
  322. page: this.page,//页数
  323. size: this.size,//条数
  324. }
  325. if (this.keyword) {
  326. data.keyword = this.typeEdit == 'Image' ? `${this.keyword}:sbjc` : `${this.keyword}:wzjc`
  327. }
  328. const paramData = {classstructureid: this.classstructureid, gname: this.floorId};
  329. const paramDataLocal = {locfl: this.locfl, gname: this.floorId};
  330. this.loading = true;
  331. if (this.typeEdit == 'Image') {
  332. queryGlsmsasset(data, paramData).then(res => {
  333. this.loading = false;
  334. if (res.data.result == 'success') {
  335. this.total = res.data.count;
  336. if (res.data.data) {
  337. const data = res.data.data;
  338. data.map(item => {
  339. item.id = item.sbjbm
  340. })
  341. this.tableData = data;
  342. } else if (res.data.count == 0) {
  343. this.tableData = [];
  344. }
  345. } else {
  346. this.$message.error('数据请求失败')
  347. }
  348. })
  349. } else if (this.typeEdit == 'Zone') {
  350. queryGlsmsLocation(data, paramDataLocal).then(res => {
  351. this.loading = false;
  352. if (res.data.result == 'success') {
  353. this.total = res.data.count;
  354. if (res.data.data) {
  355. this.tableData = res.data.data;
  356. } else if (res.data.count == 0) {
  357. this.tableData = [];
  358. }
  359. } else {
  360. this.$message.error('数据请求失败')
  361. }
  362. })
  363. }
  364. },
  365. //分页切换点击
  366. handleTableChange(page, pageSize) {
  367. this.page = page;
  368. this.queryGlsmsasset();
  369. },
  370. onSelect(record, selected, selectedRows, nativeEvent) {
  371. if (!selected && this.arrList.length > 0) {
  372. this.arrList.map((item, index) => {
  373. if (this.typeEdit == 'Zone' && item.location == record.location) {
  374. this.arrList.splice(index, 1);
  375. } else if (this.typeEdit == 'Image' && item.assetnum == record.assetnum) {
  376. this.arrList.splice(index, 1);
  377. }
  378. })
  379. }
  380. },
  381. // 中间表格勾选
  382. onSelectChange(selectedRowKeys, selectedRows) {
  383. this.selectedRowKeys = selectedRowKeys;
  384. if (this.selectedRowKeys.length > this.sysNum) {
  385. this.selectedRowKeys.pop();
  386. this.$message.error('不能超过设备数')
  387. return false;
  388. }
  389. selectedRows.map(item => {
  390. item.type = this.typeEdit;
  391. })
  392. this.arrList = [...this.arrList, ...selectedRows]
  393. const obj = {}
  394. if (this.typeEdit == 'Zone') {
  395. this.arrList = this.arrList.reduce(function (item, next) {
  396. obj[next.location] ? ' ' : obj[next.location] = true && item.push(next)
  397. return item;
  398. }, [])
  399. } else {
  400. this.arrList = this.arrList.reduce(function (item, next) {
  401. obj[next.assetnum] ? ' ' : obj[next.assetnum] = true && item.push(next)
  402. return item;
  403. }, [])
  404. }
  405. },
  406. //右侧删除
  407. deleteItem(item, index) {
  408. this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(item.location || item.assetnum), 1);
  409. this.arrList.splice(index, 1);
  410. },
  411. //右侧清空
  412. clearArrList() {
  413. this.selectedRowKeys = [];
  414. this.arrList = [];
  415. },
  416. //获取楼层
  417. getPlazaFloor() {
  418. const data = {
  419. plazaId: getUrlMsg().projectId
  420. }
  421. getPlazaFloor(data).then(res => {
  422. if (res.result == 'success') {
  423. const data = res.data;
  424. data.map(item => {
  425. item.id = item.gname;
  426. item.name = item.code;
  427. })
  428. this.dataFloor = data;
  429. }
  430. })
  431. },
  432. //获取设备大类和位置大类
  433. getQuerySmsxt() {
  434. queryWzfldl({}).then(res => {
  435. if (res.result == 'success') {
  436. if (res.data) {
  437. const data = res.data;
  438. data.map(item => {
  439. item.id = item.dl;
  440. item.name = item.dl;
  441. item.type = 'Zone'
  442. })
  443. this.locationList = data;
  444. }
  445. }
  446. })
  447. // if (this.typeEdit=='Image'){
  448. getQuerySmsxt({}).then(res => {
  449. if (res.result == 'success') {
  450. if (res.data) {
  451. const data = res.data;
  452. data.map(item => {
  453. item.id = item.code;
  454. item.name = item.name;
  455. item.type = 'Image';
  456. })
  457. this.majorList = data;
  458. }
  459. }
  460. })
  461. // }else if(this.typeEdit =='Zone'){
  462. // }
  463. },
  464. // 获取设备大类下的分类和位置大类下的分类
  465. getQuerySmsxtBy(smsxt, type) {
  466. if (type == 'Image') {
  467. const data = {
  468. smsxt: smsxt
  469. }
  470. this.spinning = true
  471. getQuerySmsxtBy(data, {}).then(res => {
  472. this.spinning = false;
  473. if (res.result == 'success') {
  474. if (res.data) {
  475. const data = res.data;
  476. (function recursion(newObj) {
  477. newObj.map(item => {
  478. item.name = item.gcxxhxtname || item.classqc;
  479. item.id = item.gcxxhxtnum || item.id;
  480. item.children = item.data;
  481. item.open = false;
  482. item.checked = 'unchecked';
  483. if (item.children) {
  484. recursion(item.children);
  485. }
  486. })
  487. })(data)
  488. this.treeData = data;
  489. let that = this;
  490. if (this.treeData.length && this.InfoLocal.length) {
  491. let arr = [];
  492. let infoLocalId = this.InfoLocal[0].id;
  493. this.treeData.map((item, index) => {
  494. item.children.map((item1, index1) => {
  495. if (infoLocalId==item1.id) {
  496. item.open = true;
  497. item1.checked = 'checked';
  498. this.typeEdit = 'Image'
  499. that.classstructureid = item1.id;
  500. that.queryGlsmsasset();
  501. }
  502. return item1
  503. })
  504. return item
  505. })
  506. }
  507. }
  508. } else {
  509. this.$message.error('获取失败');
  510. }
  511. }).catch(()=>{
  512. this.spinning = false;
  513. })
  514. } else if (type == 'Zone') {
  515. const data = {
  516. dl: smsxt
  517. }
  518. this.spinning = true
  519. queryWzflByDl(data, {}).then(res => {
  520. this.spinning = false;
  521. if (res.result == 'success') {
  522. if (res.data) {
  523. const data = res.data;
  524. (function recursion(newObj) {
  525. newObj.map(item => {
  526. item.label = item.name;
  527. if (item.children) {
  528. recursion(item.children);
  529. }
  530. })
  531. })(data)
  532. this.treeData = data;
  533. }
  534. } else {
  535. this.$message.error('获取失败');
  536. }
  537. }).catch(()=>{
  538. this.spinning = false;
  539. })
  540. }
  541. }
  542. },
  543. created() {
  544. this.floorId = getUrlMsg().FloorID;
  545. //如果有专业就带过来
  546. console.log(this.getmajorId);
  547. if (this.getmajorId) {
  548. this.typeEdit = 'Image';
  549. this.getQuerySmsxtBy(this.getmajorId, 'Image')
  550. }
  551. if (this.attrCards.length) {
  552. this.attrCards.map(item => {
  553. this.selectedRowKeys.push(item.location || item.assetnum)
  554. })
  555. this.arrList = JSON.parse(JSON.stringify(this.attrCards));
  556. this.selectList = JSON.parse(JSON.stringify(this.attrCards));
  557. } else {
  558. this.selectedRowKeys = [];
  559. }
  560. this.getQuerySmsxt();
  561. this.getPlazaFloor();
  562. }
  563. }
  564. </script>
  565. <style scoped lang="less">
  566. .edit-dialog {
  567. .dialog-content {
  568. width: 1136px;
  569. height: 499px;
  570. background: rgba(255, 255, 255, 1);
  571. border-radius: 3px;
  572. border: 1px solid rgba(239, 240, 241, 1);
  573. display: flex;
  574. /*overflow: auto;*/
  575. .left {
  576. width: 785px;
  577. border-right: 1px solid #EFF0F1;
  578. .header {
  579. width: 785px;
  580. .select {
  581. width: 260px;
  582. border-right: 1px solid #EFF0F1;
  583. display: inline-block;
  584. }
  585. .search {
  586. width: 524px;
  587. display: inline-block;
  588. .search-select {
  589. margin-left: 10px;
  590. position: relative;
  591. top: -2px;
  592. }
  593. .press-enter {
  594. margin-left: 10px;
  595. width: 236px;
  596. }
  597. }
  598. }
  599. .tree {
  600. width: 259px;
  601. height: 441px;
  602. border-right: 1px solid #EFF0F1;
  603. display: inline-block;
  604. float: left;
  605. overflow-y: scroll;
  606. overflow: overlay;
  607. }
  608. .checkbox {
  609. /*margin-top: 17px;*/
  610. /*margin-left: 13px;*/
  611. width: 500px;
  612. height: 441px;
  613. display: inline-block;
  614. display: flex;
  615. flex-direction: column;
  616. justify-content: space-between;
  617. /deep/ .ant-table-selection-column {
  618. .ant-table-header-column {
  619. display: none;
  620. }
  621. }
  622. }
  623. }
  624. .right {
  625. flex-grow: 1;
  626. .list-box {
  627. height: 440px;
  628. overflow-y: scroll;
  629. .list {
  630. background: rgba(239, 240, 241, 1);
  631. border-radius: 2px;
  632. margin: 8px 12px;
  633. position: relative;
  634. padding: 5px;
  635. .icon {
  636. position: absolute;
  637. bottom: 5px;
  638. right: 5px;
  639. cursor: pointer;
  640. }
  641. }
  642. }
  643. .select-number {
  644. margin-left: 12px;
  645. }
  646. .link {
  647. float: right;
  648. line-height: 57px;
  649. }
  650. }
  651. .header {
  652. height: 57px;
  653. line-height: 57px;
  654. border-bottom: 1px solid #EFF0F1;
  655. }
  656. }
  657. /deep/ .ant-input-affix-wrapper .ant-input-suffix {
  658. /*left: 12px;*/
  659. /*padding-right: 12px;*/
  660. }
  661. /deep/ .ant-modal-footer {
  662. border: 0;
  663. }
  664. /deep/ .ant-checkbox-wrapper + .ant-checkbox-wrapper {
  665. margin: 0;
  666. }
  667. }
  668. </style>