edit-dialog.vue 16 KB

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