edit-dialog.vue 19 KB

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