瀏覽代碼

wanda-adm:feat > 添加表头

shaun-sheep 4 年之前
父節點
當前提交
5d121fce4e

+ 10 - 5
src/api/datacenter.ts

@@ -6,17 +6,17 @@ const baseApi = "/datacenter";
 
 // 查询建筑信息
 export function buildingQuery(postParams: any): any {
-    return httputils.postJson(`${baseApi}/object/building/query`, postParams);
+    return httputils.postJson(`${ baseApi }/object/building/query`, postParams);
 }
 
 // 查询建筑信息
 export function floorQuery(postParams: any): any {
-    return httputils.postJson(`${baseApi}/object/floor/query`, postParams);
+    return httputils.postJson(`${ baseApi }/object/floor/query`, postParams);
 }
 
 // 字典查询
 export function dictCategoryQuery(postParams: any): any {
-    return httputils.postJson(`${baseApi}/dict/category`, postParams);
+    return httputils.postJson(`${ baseApi }/dict/category`, postParams);
 }
 
 // 查询项目下类型的信息点-->编辑器 空间功能类型 列表-->自己转成树
@@ -25,7 +25,7 @@ export function dictQuery(postParams: any): any {
     // "filters": "code='roomFuncType'",
     // "type": "GeneralZone"
     // }
-    return httputils.postJson(`${baseApi}/dict/query`, postParams);
+    return httputils.postJson(`${ baseApi }/dict/query`, postParams);
 }
 
 // 查询空间实例
@@ -34,5 +34,10 @@ export function PartiInstancQuery(postParams: any): any {
     // "filters": "code='roomFuncType'",
     // "type": "GeneralZone"
     // }
-    return httputils.postJson(`${baseApi}/object/zone/query`, postParams);
+    return httputils.postJson(`${ baseApi }/object/zone/query`, postParams);
+}
+
+// 查询设备信息
+export function queryEquip(postParams: any): any {
+    return httputils.postJson(`${ baseApi }/object/equip/query`, postParams)
 }

+ 1 - 1
src/api/equipComponent.ts

@@ -3,7 +3,7 @@ const baseUrl = '/equip-component'
 
 //类型下信息点
 export function dictInfo(params: any): any {
-    return httputils.getJson(`${ baseUrl }/dict/equip/info?category=${ params.type }`, {})
+    return httputils.getJson(`${ baseUrl }/dict/equip/info?category=${ params.category }`, {})
 }
 
 //所有设备类型

+ 5 - 3
src/api/httputils.ts

@@ -23,6 +23,7 @@ axiosservice.interceptors.request.use(
         config.withCredentials = true; // 允许携带token ,这个是解决跨域产生的相关问题
         config.headers = {
             projectId: UserModule.projectId, // 'Pj1101050029',//项目id
+            groupCode: 'WD', // 集团编码
             // "X-Access-Token": UserModule.token, // token
         };
         return config;
@@ -33,7 +34,7 @@ axiosservice.interceptors.request.use(
 );
 
 axiosservice.interceptors.response.use(
-    function(res) {
+    function (res) {
         //在这里对返回的数据进行处理
         //console.log('axios interceptors res = ', res.status, res)
         const resp = res.data;
@@ -58,7 +59,7 @@ axiosservice.interceptors.response.use(
         //console.log('axios interceptors resp2 = ', resp.success, resp.errorCode, resp.errorMessage, res)
         return res;
     },
-    function(err) {
+    function (err) {
         //Do something with response error
         console.log("axios interceptors err = ", err);
         return Promise.reject(err);
@@ -90,6 +91,7 @@ export default {
                 url,
                 params,
                 method: "get",
+
             });
             return response.data;
         } catch (err) {
@@ -161,7 +163,7 @@ export default {
                     downFile(blob, fileName);
                 }
             })
-            .catch(function(error) {
+            .catch(function (error) {
                 console.log(error);
             });
     },

+ 15 - 30
src/components/public/adm-multi-table.vue

@@ -11,6 +11,7 @@
             label="编辑"
             width="80"
             align="center"
+            fixed
 
         >
             <template slot-scope="scope">
@@ -23,44 +24,23 @@
         </el-table-column>
         <el-table-column label="基础信息台账">
             <el-table-column
+                v-for="item in headersStage.basicInfos"
                 show-overflow-tooltip
-                prop="province"
-                label="省份"
-                fixed
-            >
-            </el-table-column>
-            <el-table-column
-                show-overflow-tooltip
-                prop="city"
-                label="市区"
-                fixed
-            >
-            </el-table-column>
-            <el-table-column
-                show-overflow-tooltip
-                prop="zip"
-                label="邮编"
+                :prop="item.infos"
+                :label="item.name"
+                :key="item.name"
                 fixed
             >
             </el-table-column>
 
+
         </el-table-column>
         <el-table-column :label="currentHeader">
             <el-table-column
-                prop="province"
-                label="省份"
-                show-overflow-tooltip
-            >
-            </el-table-column>
-            <el-table-column
-                prop="city"
-                label="市区"
-                show-overflow-tooltip
-            >
-            </el-table-column>
-            <el-table-column
-                prop="zip"
-                label="邮编"
+                v-for="item in headersStage.dictStages"
+                :prop="item.infos"
+                :label="item.name"
+                :key="item.name"
                 show-overflow-tooltip
             >
             </el-table-column>
@@ -76,9 +56,14 @@ import { Vue, Component, Prop, Emit } from "vue-property-decorator";
 export default class extends Vue {
     // 表格数据
     @Prop({ default: Array }) tableData ?: []
+    // 表头数据
+    @Prop({ default: Object }) headersStage ?: {}
     // 当前页头文字
     @Prop({ default: '' }) currentHeader ?: string
 
+    handleEdit(index, row) {
+        console.log(index, row)
+    }
 
 }
 

+ 6 - 0
src/components/public/adm-pagination.vue

@@ -1,9 +1,11 @@
 <template>
     <el-pagination
         class="adm-pagination"
+        @size-change="sizeChange"
         @current-change="currentPage"
         :page-sizes="paginationList.sizes"
         :page-size="paginationList.size"
+        :current-page.sync="paginationList.page"
         layout="total,sizes,prev,pager,next,jumper"
         :total="paginationList.total"
     />
@@ -12,6 +14,7 @@
 <script lang="ts">
 // 当前页,总数,范围
 interface Pagination {
+    page:number,
     size: number
     total: number
     sizes: []
@@ -28,6 +31,9 @@ export default class extends Vue {
     currentPage(val: number) {
         return val
     }
+    sizeChange(val:number) {
+        console.log(val)
+    }
 }
 </script>
 

+ 0 - 41
src/components/public/adm-select.vue

@@ -1,41 +0,0 @@
-<template>
- <span class="adm-select">
-        <el-select
-            v-model="value"
-            placeholder="请选择"
-            @change="handleFilter"
-            clearable
-            filterable
-        >
-        <el-option
-            v-for="item in list"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-
-        />
-    </el-select>
- </span>
-</template>
-
-<script lang="ts">
-import { Vue, Component, Emit, Prop } from "vue-property-decorator";
-@Component({
-    name: 'adm-select'
-})
-export default class extends Vue {
-    // 初始化值
-    private value = ''
-    @Prop({ default: Array }) list?: []
-
-    @Emit('selectValue')
-    private handleFilter() {
-        return this.value
-    }
-}
-</script>
-
-<style scoped>
-
-
-</style>

+ 0 - 1
src/views/maintain/components/index.ts

@@ -1,4 +1,3 @@
-export { default as AdmSelect } from "@/components/public/adm-select.vue"
 export { default as AdmSearch } from "@/components/public/adm-search.vue"
 export { default as AdmMultiTable } from "@/components/public/adm-multi-table.vue"
 export { default as Statistics } from "@/components/public/adm-statistics.vue"

+ 139 - 85
src/views/maintain/device/index.vue

@@ -2,7 +2,22 @@
     <div class="adm-device">
         <statistics :statistics-msg="statisticsMsg"/>
         <div class="operation">
-            <admSelect @selectValue="selectValue" :list="list"/>
+            <el-select
+                v-model="deviceType"
+                placeholder="请选择"
+                @change="handleFilter"
+                clearable
+                filterable
+                class="adm-select"
+            >
+                <el-option
+                    v-for="item in list"
+                    :key="item.code"
+                    :label="item.name"
+                    :value="item.code"
+
+                />
+            </el-select>
             <admSearch @SearchValue="SearchValue"/>
             <el-button type="default" @click="addDevice" class="adm-btn">添加设备</el-button>
         </div>
@@ -12,12 +27,12 @@
                 <el-tab-pane v-for="(item,index) in paneMsg" :key="index" :label="item" :name="index.toString()"/>
             </el-tabs>
             <div class="table">
-                <template v-if="true">
-                    <admMultiTable :currentHeader="currentHeader" :tableData="tableData"/>
+                <template v-if="deviceType">
+                    <admMultiTable :currentHeader="currentHeader" :tableData="tableData" :headersStage="headersStage"/>
                     <Pagination :paginationList="paginationList" @currentPage="currentPage"/>
                 </template>
                 <div v-else class="void align">
-                    <svg-icon name="void" :width="120" :height="123"/>
+                    <svg-icon name="void" :width="String(120)" :height="String(123)"/>
                     <p class="void-title">暂无内容</p>
                     <p class="void-tips">可点击左上角选择设备类型</p>
                 </div>
@@ -64,11 +79,15 @@
 </template>
 <script lang="ts">
 import { Vue, Component } from "vue-property-decorator";
-import { Statistics, AdmSelect, AdmSearch, AdmMultiTable, Pagination, dataForm } from '../components/index'
-
+import { Statistics, AdmSearch, AdmMultiTable, Pagination, dataForm } from '../components/index'
+import { dictType, dictInfo } from "@/api/equipComponent";
+import { queryEquip } from "@/api/datacenter";
+import { UserModule } from "@/store/modules/user";
+import it from "element-ui/src/locale/lang/it";
+import th from "element-ui/src/locale/lang/th";
 @Component({
     name: 'adm-device',
-    components: { Statistics, AdmSelect, AdmSearch, AdmMultiTable, Pagination, dataForm }
+    components: { Statistics, AdmSearch, AdmMultiTable, Pagination, dataForm }
 })
 export default class extends Vue {
     private statisticsMsg = {
@@ -77,104 +96,139 @@ export default class extends Vue {
 
     }
     // 设备类值
+    deviceType = ''
     deviceVal = ''
     // 维护位置
     displayLocation = false
+    // 表头信息集合
+    headerInformation = {}
+    // 表头阶段信息结合
+    headersStage = {}
+    all = []
+    // 设备信息
+    private deviceInformation = []
     // 下拉数据
-    list = [
-        {
-            value: '选项1',
-            label: '黄金糕'
-        }, {
-            value: '选项2',
-            label: '双皮奶'
-        }, {
-            value: '选项3',
-            label: '蚵仔煎'
-        }, {
-            value: '选项4',
-            label: '龙须面'
-        }, {
-            value: '选项5',
-            label: '北京烤鸭'
-        }]
+    list = []
     private dialogVisible = false
     private paneMsg = ['设计阶段维护', '施工阶段维护', '运维阶段维护']
     private activeName = ""
     private paginationList = {
-        size: 1,
-        sizes: [10, 20.50, 100],
+        page:1,
+        size: 10,
+        sizes: [10, 20, 50, 100],
         total: 200
     }
     // 下一步
     private next = true
     private deviceMsg = '添加设备'
     private currentHeader = this.paneMsg[0]
-    private tableData = [{
-        date: '2016-05-03',
-        name: '王小虎',
-        province: '上海',
-        city: '普陀区',
-        address: '上海市普陀区金沙江路 1518 弄',
-        zip: 200333
-    }, {
-        date: '2016-05-02',
-        name: '王小虎',
-        province: '上海',
-        city: '普陀区',
-        address: '上海市普陀区金沙江路 1518 弄',
-        zip: 200333
-    }, {
-        date: '2016-05-04',
-        name: '王小虎',
-        province: '上海',
-        city: '普陀区',
-        address: '上海市普陀区金沙江路 1518 弄',
-        zip: 200333
-    }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        province: '上海',
-        city: '普陀区',
-        address: '上海市普陀区金沙江路 1518 弄',
-        zip: 200333
-    }, {
-        date: '2016-05-08',
-        name: '王小虎',
-        province: '上海',
-        city: '普陀区',
-        address: '上海市普陀区金沙江路 1518 弄',
-        zip: 200333
-    }, {
-        date: '2016-05-06',
-        name: '王小虎',
-        province: '上海',
-        city: '普陀区',
-        address: '上海市普陀区金沙江路 1518 弄',
-        zip: 200333
-    }, {
-        date: '2016-05-07',
-        name: '王小虎',
-        province: '上海',
-        city: '普陀区',
-        address: '上海市普陀区金沙江路 1518 弄',
-        zip: 200333
-    }]
+    private tableData = [
+        {
+            date: '2016-05-03',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333
+        }]
+
+    private get projectId(): string {
+        return UserModule.projectId
+    }
+
+    created() {
+        this.deviceList()
+    }
+
+// 设备类数据
+    deviceList() {
+        let param2 = {
+            distinct: true,
+            pageNumber: 1,
+            pageSize: 1000,
+            // projection: ["classCode"],
+            projectId: this.projectId
+        }
+        let promise = new Promise(resolve => {
+            dictType({}).then(res => {
+                resolve(res)
+            })
+        })
+        let promise2 = new Promise(resolve => {
+            queryEquip(param2).then(res => {
+                resolve(res)
+            })
+        })
+        Promise.all([promise, promise2]).then((res) => {
+            let allData = res[0].content;
+            this.deviceInformation = res[1].content
+            allData.filter(item => (this.deviceInformation.indexOf(item.code) > -1))
+            this.list = allData
+        })
+    }
+
+    private handleFilter(val) {
+        if (val) {
+            let param = {
+                category: val
+            }
+            let param2 = {
+                filters: val ? `classCode='${ val }'` : undefined,
+                pageNumber: this.paginationList.size,
+                pageSize: 10,
+                orders: "createTime desc, id asc",
+            }
+            let promise = new Promise(resolve => {
+                dictInfo(param).then(res => {
+                    resolve(res)
+                })
+            })
+            let promise2 = new Promise(resolve => {
+                queryEquip(param2).then(res => {
+                    resolve(res)
+                })
+            })
+            Promise.all([promise, promise2]).then(res => {
+                // 类型下信息点,默认设计阶段
+                this.headerInformation = res[0] // 获取表头
+                this.headerStage()
 
+                this.tableData = res[1].content.map(item => {
+
+
+                })
+
+            })
+
+
+        } else {
+            this.headerInformation = {}
+        }
+
+    }
+
+    headerStage() {
+        let header = []
+        if (Object.keys(this.headerInformation).length > 1) {
+            this.headerInformation.dictStages.forEach(item => {
+                if (this.currentHeader == item.name) {
+                    item.infos && item.infos.forEach(val => header.push(val))
+                }
+            })
+        }
+        this.headersStage = {
+            basicInfos: this.headerInformation.basicInfos,
+            dictStages: header
+        }
+        this.all = [...this.headersStage.basicInfos, ...this.headersStage.dictStages]
+
+    }
 
 // 维护阶段 tabs
     handleClick(val: any) {
         console.log(val)
         this.currentHeader = val.label
-        switch (val.index) {
-            case 0:
-                break;
-            case 1:
-                break;
-            case 2:
-                break;
-            default:
-        }
+        this.headerStage()
     }
 
     //设备类筛选