|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <a-modal v-model="visible" title="选择编辑" on-ok="handleOk" width="1200px" class="edit-dialog">
|
|
|
+ <a-modal v-model="visible" title="选择编辑" on-ok="handleOk" width="1200px" class="edit-dialog">
|
|
|
<template slot="footer">
|
|
|
<a-button key="back" @click="handleCancel">
|
|
|
取消
|
|
@@ -12,48 +12,50 @@
|
|
|
<div class="left">
|
|
|
<div class="header">
|
|
|
<div class="select">
|
|
|
- <a-select default-value="全部" style="width:90%;margin-left: 10px" @change="handleMajor">
|
|
|
- <a-select-option :value="item.value" v-for="item in majorList" :key="item.value">
|
|
|
- {{item.value}}
|
|
|
- </a-select-option>
|
|
|
- </a-select>
|
|
|
+ <Select style="margin: 0 10px"
|
|
|
+ v-model="majorId"
|
|
|
+ @change="handleMajor"
|
|
|
+ :hideClear='true'
|
|
|
+ :selectdata="majorList"
|
|
|
+ :placeholder="'请选择'"
|
|
|
+ class="search-select"
|
|
|
+ width="236"
|
|
|
+ />
|
|
|
</div>
|
|
|
<div class="search">
|
|
|
<Select
|
|
|
- v-model="model"
|
|
|
- caption="所属系统:"
|
|
|
- :isReadOnly="true"
|
|
|
- @change="testClick"
|
|
|
+ v-model="floorId"
|
|
|
+ caption="所属楼层:"
|
|
|
+ @change="chageFloor"
|
|
|
:hideClear='true'
|
|
|
- :selectdata="dataSelect2"
|
|
|
+ :selectdata="dataFloor"
|
|
|
:placeholder="'请选择'"
|
|
|
class="search-select"
|
|
|
width="236"
|
|
|
/>
|
|
|
- <a-input-search placeholder="搜索" class="press-enter" @search="onSearch"/>
|
|
|
+ <a-input-search placeholder="搜索" class="press-enter" @search="onSearch" v-model="keyword"/>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="tree">
|
|
|
- <searchTree @getTreeId="getTreeId"/>
|
|
|
+ <searchTree @getTreeId="getTreeId" :treeData="treeData"/>
|
|
|
</div>
|
|
|
<div class="checkbox">
|
|
|
- <a-checkbox-group @change="ChangeCheckbox">
|
|
|
- <a-checkbox v-for="item in plainOptions" :value="item" :key="item" style="display: block">{{item}}
|
|
|
- </a-checkbox>
|
|
|
- </a-checkbox-group>
|
|
|
-
|
|
|
+ <a-table :pagination="false" row-key='sbjbm' :columns="typeEdit==1?columnsSys:columnsLocal" :data-source="tableData" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange,onSelect:onSelect }" :scroll="{ y: 340 }" :loading="loading"/>
|
|
|
+ <a-pagination v-if="total>0" v-model="page" :total="total" show-less-items style="margin-left: auto;" @change="handleTableChange"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
<div class="header">
|
|
|
- <span class="select-number">已选择 <b>2</b>/4</span>
|
|
|
- <a-button type="link" class="link">清空</a-button>
|
|
|
+ <span class="select-number">已选择 <b>{{selectList.length}}</b>/{{sysNum}}</span>
|
|
|
+ <a-button type="link" class="link" @click="clearSelectList">清空</a-button>
|
|
|
</div>
|
|
|
|
|
|
- <p v-for="(item,index) in selectList" :key="index" class="list">{{item.value}}
|
|
|
- <a-icon type="close" class="icon"/>
|
|
|
- </p>
|
|
|
+ <div class="list-box">
|
|
|
+ <p v-for="(item,index) in selectList" :key="index" class="list">{{item.sbjc}}
|
|
|
+ <a-icon type="close" class="icon" @click="deleteItem(item,index)"/>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
@@ -62,36 +64,75 @@
|
|
|
|
|
|
<script>
|
|
|
import searchTree from "@/components/edit/search_tree";
|
|
|
-
|
|
|
+ import {queryGlsmsasset ,getQuerySmsxt,getPlazaFloor,getQuerySmsxtBy} from "@/api/editer";
|
|
|
export default {
|
|
|
name: "edit-dialog",
|
|
|
components: {searchTree},
|
|
|
+ props:{
|
|
|
+ typeEdit:Number , //用于区分是设备 还是 位置
|
|
|
+ getmajorId:Number, //专业Id
|
|
|
+ sysNum:Number //设备总数
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
loading: false,
|
|
|
visible: false,
|
|
|
model: 'test1',
|
|
|
searchName: '',
|
|
|
- dataSelect2: [
|
|
|
- {id: 'test1', name: '全部'},
|
|
|
- {id: 'test2', name: '单平米'},
|
|
|
- {id: 'test3', name: '下级分项'},
|
|
|
- {id: 'test4', name: '滑动平均滑动平均'}
|
|
|
- ],
|
|
|
- selectList: [
|
|
|
- {value: '福建三明万达-供电系统-6楼-工程信息化中的区域编码ND18247283742387443345435'},
|
|
|
- {value: '福建三明万达-供电系统-6楼-工程信息化中的区域编码ND18247283742387443345435福建三明万达-供电系统-6楼-工程信息化中的区域编码ND18247283742387443345435'},
|
|
|
- ],
|
|
|
+ floorId:"",//所属楼层
|
|
|
+ dataFloor: [],
|
|
|
+ selectList: [],
|
|
|
plainOptions: ['福建三明万达-供电系统-6楼-工程信息化中的区域编码ND182472e83742', '福建三明万达-供电系统-6楼-工程信息化中的区域编码ND18247283742'],
|
|
|
- majorList: [
|
|
|
- {value: '全部'}, {value: 'luck'}, {value: 'tom'}
|
|
|
- ],
|
|
|
+ majorList: [],
|
|
|
checkedList: [],
|
|
|
-
|
|
|
-
|
|
|
+ keyword:'',
|
|
|
+ classstructureid:'',
|
|
|
+ locfl:'',
|
|
|
+ columnsSys : [
|
|
|
+ {
|
|
|
+ title: '设备名称',
|
|
|
+ dataIndex: 'sbjc',
|
|
|
+ key: 'sbjc',
|
|
|
+ width: '75%',
|
|
|
+ scopedSlots: { customRender: 'sbjc' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '设备内码',
|
|
|
+ dataIndex: 'sbxh',
|
|
|
+ key: 'sbjbm',
|
|
|
+ width: '25%',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ columnsLocal : [
|
|
|
+ {
|
|
|
+ title: '位置名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ key: 'name',
|
|
|
+ width: '75%',
|
|
|
+ scopedSlots: { customRender: 'name' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '位置内码',
|
|
|
+ dataIndex: 'code',
|
|
|
+ key: 'code',
|
|
|
+ width: '25%',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tableData:[],
|
|
|
+ loading:false,
|
|
|
+ page:1,
|
|
|
+ size:10,
|
|
|
+ selectedRowKeys:[],
|
|
|
+ treeData:[],
|
|
|
+ total:0
|
|
|
}
|
|
|
},
|
|
|
+ computed:{
|
|
|
+ majorId(){
|
|
|
+ return this.getmajorId||''
|
|
|
+ }
|
|
|
|
|
|
+ },
|
|
|
methods: {
|
|
|
showModal() {
|
|
|
this.visible = true;
|
|
@@ -101,33 +142,178 @@
|
|
|
setTimeout(() => {
|
|
|
this.visible = false;
|
|
|
this.loading = false;
|
|
|
+ console.log(this.selectedRowKeys);
|
|
|
}, 3000);
|
|
|
},
|
|
|
handleCancel(e) {
|
|
|
this.visible = false;
|
|
|
},
|
|
|
onSearch(value) {
|
|
|
- console.log(value);
|
|
|
+ this.queryGlsmsasset()
|
|
|
},
|
|
|
ChangeCheckbox(val) {
|
|
|
console.log(val)
|
|
|
},
|
|
|
-
|
|
|
-
|
|
|
handleMajor(val) {
|
|
|
- console.log(val)
|
|
|
+ this.getQuerySmsxtBy(val.id)
|
|
|
},
|
|
|
- testClick(data) {
|
|
|
- console.log(data)
|
|
|
+ chageFloor(data) {
|
|
|
+ this.queryGlsmsasset();
|
|
|
},
|
|
|
pressEnter(e) {
|
|
|
console.log(e)
|
|
|
},
|
|
|
- getTreeId(id){
|
|
|
- console.log(id);
|
|
|
+ //获取treeId --classstructureid
|
|
|
+ getTreeId(id) {
|
|
|
+ if(this.typeEdit==1){
|
|
|
+ this.classstructureid = id;
|
|
|
+ }else if(this.typeEdit==2){
|
|
|
+ this.locfl = id;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.queryGlsmsasset();
|
|
|
+ },
|
|
|
+ //获取表格数据
|
|
|
+ queryGlsmsasset(){
|
|
|
+ let data = {
|
|
|
+ plazaId: '1000423',//广场id 必填
|
|
|
+ page: this.page,//页数
|
|
|
+ size: this.size,//条数
|
|
|
+ type: this.typeEdit,//类型
|
|
|
}
|
|
|
- }
|
|
|
+ if (this.keyword) {
|
|
|
+ data.keyword = `${this.keyword}:brand`
|
|
|
+ }
|
|
|
+ let paramData = {classstructureid: this.classstructureid,floor:this.floorId};
|
|
|
+ let paramDataLocal = {locfl: this.locfl,floor:this.floorId};
|
|
|
+ this.loading = true;
|
|
|
+ queryGlsmsasset(data,this.typeEdit==1?paramData:paramDataLocal).then(res => {
|
|
|
+ this.loading = false;
|
|
|
+ if(res.result == 'success'){
|
|
|
+ this.total = res.count;
|
|
|
+ if(res.data){
|
|
|
+ this.tableData = res.data;
|
|
|
+ }else if(res.count == 0){
|
|
|
+ this.tableData = [];
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.$message.error('数据请求失败')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //分页切换点击
|
|
|
+ handleTableChange(page, pageSize) {
|
|
|
+ this.page = page;
|
|
|
+ this.queryGlsmsasset();
|
|
|
+ },
|
|
|
+ onSelect(record, selected, selectedRows, nativeEvent){
|
|
|
+ if(!selected && this.selectList.length>0){
|
|
|
+ this.selectList.map((item,index)=>{
|
|
|
+ if( item.sbjbm == record.sbjbm){
|
|
|
+ this.selectList.splice(index,1);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 中间表格勾选
|
|
|
+ onSelectChange(selectedRowKeys,selectedRows) {
|
|
|
+ this.selectedRowKeys = selectedRowKeys;
|
|
|
+ if(this.selectedRowKeys.length>this.sysNum){
|
|
|
+ this.selectedRowKeys.pop();
|
|
|
+ this.$message.error('不能超过设备数')
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ selectedRows.map(item=>{
|
|
|
+ this.selectList.push(item)
|
|
|
+ })
|
|
|
+ let obj = {}
|
|
|
+
|
|
|
+ this.selectList = this.selectList.reduce (function(item,next){
|
|
|
+
|
|
|
+ obj[next.sbjbm] ? ' ' : obj[next.sbjbm] = true && item.push(next)
|
|
|
+
|
|
|
+ return item;
|
|
|
+
|
|
|
+ },[])
|
|
|
+ },
|
|
|
+ //右侧删除
|
|
|
+ deleteItem(item,index){
|
|
|
+ this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(item.sbjbm),1);
|
|
|
+ this.selectList.splice(index,1);
|
|
|
+ },
|
|
|
+ //右侧清空
|
|
|
+ clearSelectList(){
|
|
|
+ this.selectedRowKeys = [];
|
|
|
+ this.selectList = [];
|
|
|
+ },
|
|
|
+ //获取楼层
|
|
|
+ getPlazaFloor(){
|
|
|
+ let data = {
|
|
|
+ plazaId:'1000423'
|
|
|
+ }
|
|
|
+ getPlazaFloor(data,{}).then(res =>{
|
|
|
+ if(res.result == 'success'){
|
|
|
+ let data = res.data;
|
|
|
+ data.map(item=>{
|
|
|
+ item.id = item.code;
|
|
|
+ })
|
|
|
+ this.dataFloor = data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取专业
|
|
|
+ getQuerySmsxt(){
|
|
|
+ getQuerySmsxt({}).then(res =>{
|
|
|
+ if(res.result == 'success'){
|
|
|
+ if(res.data){
|
|
|
+ let data = res.data;
|
|
|
+ data.map(item=>{
|
|
|
+ item.id = item.smsxt;
|
|
|
+ item.name = item.smsxtname;
|
|
|
+ })
|
|
|
+ this.majorList = data;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getQuerySmsxtBy(smsxt){
|
|
|
+ let data = {
|
|
|
+ smsxt:smsxt
|
|
|
+ }
|
|
|
+ getQuerySmsxtBy(data,{}).then(res =>{
|
|
|
+ if(res.result == 'success') {
|
|
|
+ if(res.data){
|
|
|
+ let data = res.data;
|
|
|
+ (function recursion(newObj) {
|
|
|
+ newObj.map(item=>{
|
|
|
+ item.label = item.name;
|
|
|
+ if(item.children){
|
|
|
+ recursion(item.children);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })(data)
|
|
|
+
|
|
|
+ this.treeData = data;
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.$message.error('获取失败');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getQuerySmsxt();
|
|
|
+ //如果有专业就带过来
|
|
|
+ if(this.majorId){
|
|
|
+ this.getQuerySmsxtBy(this.majorId)
|
|
|
+ }else{
|
|
|
+ this.getQuerySmsxtBy('');
|
|
|
+ }
|
|
|
|
|
|
+
|
|
|
+
|
|
|
+ this.getPlazaFloor();
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
@@ -140,7 +326,7 @@
|
|
|
border-radius: 3px;
|
|
|
border: 1px solid rgba(239, 240, 241, 1);
|
|
|
display: flex;
|
|
|
- overflow: auto;
|
|
|
+ /*overflow: auto;*/
|
|
|
|
|
|
.left {
|
|
|
width: 785px;
|
|
@@ -181,37 +367,52 @@
|
|
|
border-right: 1px solid #EFF0F1;
|
|
|
display: inline-block;
|
|
|
float: left;
|
|
|
+ overflow-y: scroll;
|
|
|
+ overflow:overlay;
|
|
|
|
|
|
}
|
|
|
|
|
|
.checkbox {
|
|
|
- margin-top: 17px;
|
|
|
- margin-left: 13px;
|
|
|
+ /*margin-top: 17px;*/
|
|
|
+ /*margin-left: 13px;*/
|
|
|
width: 500px;
|
|
|
+ height: 441px;
|
|
|
display: inline-block;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ /deep/ .ant-table-selection-column {
|
|
|
+ .ant-table-header-column{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
flex-grow: 1;
|
|
|
|
|
|
-
|
|
|
- .list {
|
|
|
- background: rgba(239, 240, 241, 1);
|
|
|
- border-radius: 2px;
|
|
|
- margin: 8px 12px;
|
|
|
- position: relative;
|
|
|
- padding: 5px;
|
|
|
-
|
|
|
- .icon {
|
|
|
- position: absolute;
|
|
|
- bottom: 5px;
|
|
|
- right: 5px;
|
|
|
- cursor: pointer;
|
|
|
+ .list-box{
|
|
|
+ height: 440px;
|
|
|
+ overflow-y: scroll;
|
|
|
+ .list {
|
|
|
+ background: rgba(239, 240, 241, 1);
|
|
|
+ border-radius: 2px;
|
|
|
+ margin: 8px 12px;
|
|
|
+ position: relative;
|
|
|
+ padding: 5px;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 5px;
|
|
|
+ right: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
+
|
|
|
.select-number {
|
|
|
margin-left: 12px;
|
|
|
|