Browse Source

'添加批量绑定弹窗'

zhangyu 4 years ago
parent
commit
68bd686e1f
3 changed files with 270 additions and 114 deletions
  1. 1 1
      src/components/edit/attr_select.vue
  2. 258 112
      src/components/edit/edit-dialog.vue
  3. 11 1
      src/store/index.ts

+ 1 - 1
src/components/edit/attr_select.vue

@@ -349,7 +349,7 @@
         </a-collapse-panel>
       </a-collapse>
     </div>
-    <editDialog ref="dialog" :attrCards="attrCards" :GraphElementId="GraphElementId" :InfoLocal="InfoLocal" :sysNum="imageNum" :key="keys" />
+    <editDialog ref="dialog" :attrCards="attrCards" :lengedName="lengedName" :GraphElementId="GraphElementId" :InfoLocal="InfoLocal" :sysNum="imageNum" :key="keys" />
 <!--    <editDialog ref="dialog" :attrCards="attrCards" :getmajorId="getmajorId" :InfoLocal="InfoLocal" :sysNum="imageNum" :key="new Date().getTime()" />-->
     <!--    <editDialog ref="dialog" :typeEdit="2" :getmajorId="'1001'" :sysNum="5" />-->
   </div>

+ 258 - 112
src/components/edit/edit-dialog.vue

@@ -1,96 +1,118 @@
 <template>
-    <a-modal v-model="visible" title="选择编辑" width="1200px" class="edit-dialog" @cancel="handleCancel">
-        <template slot="footer">
-            <a-button key="back" @click="handleCancel">
-                取消
-            </a-button>
-            <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
-                确认
-            </a-button>
-        </template>
-        <div class="dialog-content">
-            <div class="left">
-                <div class="header">
-                    <div class="select">
-                        <a-select style="width: 316px;margin: 0 10px" :default-value="'#'" :value="majorId">
-                            <a-select-option value="#"
-                                             @click="handleChange('#')">
-                               推荐
-                            </a-select-option>
-                            <a-select-opt-group>
-                                <span slot="label">位置区域</span>
-                                <a-select-option v-for="item in locationList" :value="item.id"
-                                                 @click="handleChange(item)">
-                                    {{item.name}}
-                            </a-select-option>
-                            <a-select-opt-group>
-                                <span slot="label">设备设施</span>
-                                <a-select-option v-for="item in majorList" :value="item.id" @click="handleChange(item)">
-                                    {{item.name}}
+    <div>
+        <a-modal v-model="visible" title="选择编辑" width="1200px" class="edit-dialog" @cancel="handleCancel">
+            <template slot="footer">
+                <a-button key="back" @click="handleCancel">
+                    取消
+                </a-button>
+                <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
+                    确认
+                </a-button>
+            </template>
+            <div class="dialog-content">
+                <div class="left">
+                    <div class="header">
+                        <div class="select">
+                            <a-select style="width: 316px;margin: 0 10px" :default-value="'#'" :value="majorId">
+                                <a-select-option value="#"
+                                                @click="handleChange('#')">
+                                推荐
                                 </a-select-option>
-                            </a-select-opt-group>
-
-                            </a-select-opt-group>
-                        </a-select>
-                        <!--            <Select style="margin: 0 10px"-->
-                        <!--                    v-model="majorId"-->
-                        <!--                    @change="handleMajor"-->
-                        <!--                    :hideClear='true'-->
-                        <!--                    :selectdata="majorList"-->
-                        <!--                    :placeholder="'请选择'"-->
-                        <!--                    class="search-select"-->
-                        <!--                    width="236" isReadOnly-->
-                        <!--            />-->
+                                <a-select-opt-group>
+                                    <span slot="label">位置区域</span>
+                                    <a-select-option v-for="item in locationList" :value="item.id"
+                                                    @click="handleChange(item)">
+                                        {{item.name}}
+                                </a-select-option>
+                                <a-select-opt-group>
+                                    <span slot="label">设备设施</span>
+                                    <a-select-option v-for="item in majorList" :value="item.id" @click="handleChange(item)">
+                                        {{item.name}}
+                                    </a-select-option>
+                                </a-select-opt-group>
+
+                                </a-select-opt-group>
+                            </a-select>
+                            <!--            <Select style="margin: 0 10px"-->
+                            <!--                    v-model="majorId"-->
+                            <!--                    @change="handleMajor"-->
+                            <!--                    :hideClear='true'-->
+                            <!--                    :selectdata="majorList"-->
+                            <!--                    :placeholder="'请选择'"-->
+                            <!--                    class="search-select"-->
+                            <!--                    width="236" isReadOnly-->
+                            <!--            />-->
+                        </div>
+                        <div class="search">
+                            <Select
+                                    v-model="floorId"
+                                    caption="所属楼层:"
+                                    @change="chageFloor"
+                                    :hideClear='false'
+                                    :selectdata="dataFloor"
+                                    :placeholder="'请选择'"
+                                    class="search-select"
+                                    width="236"
+                            />
+                            <a-input-search placeholder="搜索位置名称" class="press-enter" @search="onSearch" v-model="keyword"/>
+
+                        </div>
                     </div>
-                    <div class="search">
-                        <Select
-                                v-model="floorId"
-                                caption="所属楼层:"
-                                @change="chageFloor"
-                                :hideClear='false'
-                                :selectdata="dataFloor"
-                                :placeholder="'请选择'"
-                                class="search-select"
-                                width="236"
-                        />
-                        <a-input-search placeholder="搜索位置名称" class="press-enter" @search="onSearch" v-model="keyword"/>
-
+                    <div class="tree" >
+                        <a-spin :spinning="spinning">
+                        <a-input-search placeholder="请输入关键字" v-if="selectVal ||treeData.length" style="width: 315px;margin: 10px 10px;"  v-model="selectVal"  @search="onSearchTree" />
+                    <div style="height: 385px;overflow-y: scroll;">
+                        <Tree v-if="treeData.length" @change="getTreeId" :data="treeData"/>
+                        <div v-else style="margin: 40px 70px;">暂无推荐数据</div>
+                    </div>
+                        </a-spin>
+                    </div>
+                    <div class="checkbox">
+                        <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"/>
+                        <a-pagination v-if="total>0" v-model="page" :total="total" show-less-items
+                                    style="margin-left: auto;" @change="handleTableChange"/>
                     </div>
                 </div>
-                <div class="tree" >
-                    <a-spin :spinning="spinning">
-                    <a-input-search placeholder="请输入关键字" v-if="selectVal ||treeData.length" style="width: 315px;margin: 10px 10px;"  v-model="selectVal"  @search="onSearchTree" />
-                   <div style="height: 385px;overflow-y: scroll;">
-                       <Tree v-if="treeData.length" @change="getTreeId" :data="treeData"/>
-                       <div v-else style="margin: 40px 70px;">暂无推荐数据</div>
-                   </div>
-                    </a-spin>
-                </div>
-                <div class="checkbox">
-                    <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"/>
-                    <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>{{arrList.length}}</b>/{{sysNum}}</span>
-                    <a-button type="link" class="link" @click="clearArrList" :disabled="arrList.length==0">清空</a-button>
-                </div>
+                <div class="right">
+                    <div class="header">
+                        <span class="select-number">已选择 <b>{{arrList.length}}</b>/{{sysNum}}</span>
+                        <a-button type="link" class="link" @click="clearArrList" :disabled="arrList.length==0">清空</a-button>
+                    </div>
 
-                <div class="list-box">
-                    <p v-for="(item,index) in arrList" :key="index" class="list">{{item.sbjc||item.wzjc}}
-                        <a-icon type="close" class="icon" @click="deleteItem(item,index)"/>
-                    </p>
-                </div>
+                    <div class="list-box">
+                        <p v-for="(item,index) in arrList" :key="index" class="list">{{item.sbjc||item.wzjc}}
+                            <a-icon type="close" class="icon" @click="deleteItem(item,index)"/>
+                        </p>
+                    </div>
 
+                </div>
+            </div>
+        </a-modal>
+
+        <a-modal v-model="visibleBind" title="是否批量绑定图例" width="420px" class="edit-dialog" @cancel="handleClickCancel" centered>
+            <template slot="footer">
+                <a-checkbox @change="onChangeRemember" :checked="isRem" style="float: left;margin-top: 5px;">
+                    记住操作,不再提醒
+                </a-checkbox>
+                <a-button key="back" @click="handleClickUntreated">
+                    暂不处理
+                </a-button>
+                <a-button key="submit" type="primary" :loading="loading" @click="handleClickBind">
+                    批量绑定
+                </a-button>
+            </template>
+            <div>
+                <p>{{`系统自动将其他平面图中的“${lengedName}”绑定相同台账,涉及以下平面图:`}}</p>
+
+                <p>Bla bla ...</p>
+                <p>Bla bla ...</p>
             </div>
-        </div>
-    </a-modal>
+        </a-modal>
+    </div>
 </template>
 
 <script>
@@ -106,7 +128,8 @@
         graphElementOrderInfoLocal
     } from "@/api/editer";
     import bus from "@/bus";
-    import {getUrlMsg} from '@/components/urlMsg.js'
+    import {getUrlMsg} from '@/components/urlMsg.js';
+    import { mapGetters } from 'vuex';
 
     export default {
         name: "edit-dialog",
@@ -116,9 +139,11 @@
             attrCards: Array,
             // getmajorId: String,
             InfoLocal: Array,
-            GraphElementId:String
+            GraphElementId:String,
+            lengedName: String
         },
         computed: {
+            ...mapGetters(["isRemember","rememberBtn"])
             // majorId() {
             //     return ''
             // }
@@ -196,7 +221,10 @@
                 typeEdit: '',
                 selectVal:'',
                 sysId:'',
-                majorId:'#'
+                majorId:'#',
+                visibleBind: false, // 是否显示批量绑定弹窗
+                isRem: false, // 是否记住操作
+
             }
         },
         watch: {
@@ -225,30 +253,125 @@
                 this.visible = true;
             },
             handleOk(e) {
-                this.loading = true;
-                setTimeout(() => {
-                    this.visible = false;
-                    this.loading = false;
-                    const lists = [];
-                    let arr = [];
-                    arr = JSON.parse(JSON.stringify(this.arrList))
-                    console.log(arr);
-                    arr.map(item => {
-                        if (item.type=='Zone') {
-                            lists.push({id: item.location, name: item.wzjc , type: 'Zone'})
-                        }
-                        if (item.type=='Image') {
-                            lists.push({
-                                id: item.assetnum,
-                                name: item.sbjc,
-                                type: 'Image'
-                            })
-                        }
-                    })
-                    console.log(lists);
-                    bus.$emit('changeAttachObjectIds', lists, true)
-                    bus.$emit('updateAttachMsg', lists)
-                }, 1000);
+                // this.loading = true;
+                // this.visible = false;
+                // this.loading = false;
+                const lists = [];
+                let arr = [];
+                arr = JSON.parse(JSON.stringify(this.arrList))
+                arr.map(item => {
+                    if (item.type=='Zone') {
+                        lists.push({id: item.location, name: item.wzjc , type: 'Zone'})
+                    }
+                    if (item.type=='Image') {
+                        lists.push({
+                            id: item.assetnum,
+                            name: item.sbjc,
+                            type: 'Image'
+                        })
+                    }
+                })
+                bus.$emit('changeAttachObjectIds', lists, true)
+                bus.$emit('updateAttachMsg', lists)
+                if (this.isRem && this.rememberBtn == "bind") {
+                    // 直接绑定接口
+                } else if (!this.isRem) {
+                    // 打开批量绑定弹窗并查询相关楼层
+                    this.visibleBind = true;
+                }
+                // setTimeout(() => {
+                //     this.visible = false;
+                //     this.loading = false;
+                //     const lists = [];
+                //     let arr = [];
+                //     arr = JSON.parse(JSON.stringify(this.arrList))
+                //     console.log(arr);
+                //     arr.map(item => {
+                //         if (item.type=='Zone') {
+                //             lists.push({id: item.location, name: item.wzjc , type: 'Zone'})
+                //         }
+                //         if (item.type=='Image') {
+                //             lists.push({
+                //                 id: item.assetnum,
+                //                 name: item.sbjc,
+                //                 type: 'Image'
+                //             })
+                //         }
+                //     })
+                //     console.log(lists);
+                //     bus.$emit('changeAttachObjectIds', lists)
+                //     bus.$emit('updateAttachMsg', lists)
+                // }, 1000);
+            },
+            // 查询相关图并打开批量绑定弹窗
+            getBindGraphs() {
+                const data = {
+                    "Data":{
+                        "HasPub":[ ],
+                        "NotPub":[
+                            {
+                                "Graphs":[
+                                    {
+                                        "BuildingId":"1",
+                                        "CategoryId":"LCGN",
+                                        "Floor":{
+                                            "Code":"B1",
+                                            "Gcode":"B1",
+                                            "Gname":"b1",
+                                            "Name":"地下1层",
+                                            "Seq":-100
+                                        },
+                                        "FloorId":"b1",
+                                        "Id":"3e3f48bf970a4a9b9d51cb32abe2747b",
+                                        "IsPub":false,
+                                        "ProjectId":"1000423"
+                                    },
+                                    {
+                                        "BuildingId":"1",
+                                        "CategoryId":"LCGN",
+                                        "Floor":{
+                                            "Code":"F5",
+                                            "Gcode":"5F",
+                                            "Gname":"f5",
+                                            "Name":"第5层",
+                                            "Seq":500
+                                        },
+                                        "FloorId":"f5",
+                                        "Id":"49a886cb00df4d72ade2786d6536dc5a",
+                                        "IsPub":false,
+                                        "ProjectId":"1000423"
+                                    }
+                                ],
+                                "Id":"LCGN",
+                                "Name":"楼层功能"
+                            },
+                            {
+                                "Graphs":[
+                                    {
+                                        "BuildingId":"1",
+                                        "CategoryId":"XFXT",
+                                        "Floor":{
+                                            "Code":"F6",
+                                            "Gcode":"6F",
+                                            "Gname":"f6",
+                                            "Name":"第6层",
+                                            "Seq":600
+                                        },
+                                        "FloorId":"f6",
+                                        "Id":"4ae0893d48a249339f53883ac2cd1b36",
+                                        "IsPub":false,
+                                        "ProjectId":"1000423"
+                                    }
+                                ],
+                                "Id":"XFXT",
+                                "Name":"消防系统"
+                            }
+                        ]
+                    },
+                    "Message":"",
+                    "Result":"success"
+                }
+
             },
             handleCancel(e) {
                 this.visible = false;
@@ -268,6 +391,27 @@
                 console.log(lists);
                 bus.$emit('changeAttachObjectIds', lists, false)
             },
+            // 关闭批量绑定弹窗
+            handleClickCancel() {
+                this.visibleBind = false;
+                this.isRem = false;
+                this.$store.commit("setIsRemember", this.isRem);
+            },
+            // 勾选记住选择复选框
+            onChangeRemember(e) {
+                this.isRem = e.target.checked;
+                this.$store.commit("setIsRemember", this.isRem);
+            },
+            // 点击暂不处理按钮
+            handleClickUntreated() {
+                this.$store.commit("setRememberBtn", "untreated");
+                this.visibleBind = false;
+            },
+            // 点击批量绑定按钮
+            handleClickBind() {
+                this.$store.commit("setRememberBtn", "bind");
+                this.visibleBind = false;
+            },
             onSearch(value) {
                 this.queryGlsmsasset()
             },
@@ -667,6 +811,8 @@
         created() {
             // 取gcname
             this.floorId = getUrlMsg().FloorID;
+            // 获取vuex的isRemember赋值给isRem
+            this.isRem = this.isRemember;
             //如果有专业就带过来
             if (this.GraphElementId) {
               this.tuijian();

+ 11 - 1
src/store/index.ts

@@ -9,7 +9,9 @@ export default new Vuex.Store({
     GraphCategoryIds: ['NTXT'], //系统类型
     TypeIdToGraphElement: {}, //typeid到图例元素的映射
     token: null,
-    GraphElement:[]
+    GraphElement:[],
+    isRemember: false,
+    rememberBtn: "bind"
   },
   mutations: {
     TypeIdToGraphElement(state, data) {
@@ -32,6 +34,12 @@ export default new Vuex.Store({
     SETSSOTOKEN(state, data) {
       state.token = data
     },
+    setIsRemember(state, data) {
+      state.isRemember = data
+    },
+    setRememberBtn(state, data) {
+      state.rememberBtn = data
+    },
   },
   actions: {
     getElementType({ commit }, params) {
@@ -47,6 +55,8 @@ export default new Vuex.Store({
   },
   getters: {
     token: (state) => state.token,
+    isRemember: (state) => state.isRemember,
+    rememberBtn: (state) => state.rememberBtn,
   },
   modules: {
   }