Browse Source

钻取表的修改

zhulizhen1111 4 years ago
parent
commit
d7fb998cf7
1 changed files with 234 additions and 148 deletions
  1. 234 148
      src/views/equipment/table/eqDetaileDialog.vue

+ 234 - 148
src/views/equipment/table/eqDetaileDialog.vue

@@ -2,111 +2,123 @@
     <!-- 详情页面 -->
     <div class='gdqd-dialog'>
         <div class='top'></div>
-        <div class='gdqd-dialog-top'>
-            <el-input
-                placeholder='搜索设备简称编号'
-                style='width:192px;margin-right:12px'
-                size='small'
-                prefix-icon='el-icon-search'
-                v-model='sbjc'
-                clearable
-                @keyup.enter.native='queryTableList'
-                @blur='queryTableList'
-            ></el-input>
-            <Select v-model='sbglgs' width='180' tipPlace='top' caption='管理归属:' size='small' :selectdata='sbglgsOption' @change='queryTableList'></Select>
-            <Select
-                width='160'
-                style='margin: 0 12px;'
-                v-model='status'
-                tipPlace='top'
-                caption='设备状态:'
-                size='small'
-                :selectdata='statusOption'
-                @change='queryTableList'
-            ></Select>
-            <el-input
-                placeholder='搜索品牌、型号'
-                style='width:180px;margin-right:12px'
-                size='small'
-                clearable
-                prefix-icon='el-icon-search'
-                v-model='brand'
-                @keyup.enter.native='queryTableList'
-                @blur='queryTableList'
-            ></el-input>
-            <Select
-                width='150'
-                style='margin-right:12px;'
-                v-model='floor'
-                tipPlace='top'
-                caption='楼层:'
-                size='small'
-                :selectdata='floorAllSelect'
-                @change='queryTableList'
-            ></Select>
-            <el-input
-                placeholder='搜索安装位置'
-                @keyup.enter.native='queryTableList'
-                @blur='queryTableList'
-                clearable
-                style='width:180px;margin-right:12px'
-                size='small'
-                prefix-icon='el-icon-search'
-                v-model='wzjc'
-            ></el-input>
-            <!-- 多余的筛选 -->
-            <input-dialog :type='1' @confirm='confirm'></input-dialog>
+        <div class='gdqd-top'>
+            <div class='gdqd-dialog-top'>
+                <el-input
+                    placeholder='搜索设备简称编号'
+                    style='width:192px;margin-right:12px'
+                    size='small'
+                    prefix-icon='el-icon-search'
+                    v-model='sbjc'
+                    clearable
+                    @keyup.enter.native='queryTableList'
+                    @blur='queryTableList'
+                ></el-input>
+                <Select v-model='sbglgs' width='180' tipPlace='top' caption='管理归属:' size='small' :selectdata='sbglgsOption' @change='queryTableList'></Select>
+                <Select
+                    width='160'
+                    style='margin: 0 12px;'
+                    v-model='status'
+                    tipPlace='top'
+                    caption='设备状态:'
+                    size='small'
+                    :selectdata='statusOption'
+                    @change='queryTableList'
+                ></Select>
+                <el-input
+                    placeholder='搜索品牌、型号'
+                    style='width:180px;margin-right:12px'
+                    size='small'
+                    clearable
+                    prefix-icon='el-icon-search'
+                    v-model='brand'
+                    @keyup.enter.native='queryTableList'
+                    @blur='queryTableList'
+                ></el-input>
+                <Select
+                    width='150'
+                    style='margin-right:12px;'
+                    v-model='floor'
+                    tipPlace='top'
+                    caption='楼层:'
+                    size='small'
+                    :selectdata='floorAllSelect'
+                    @change='queryTableList'
+                ></Select>
+                <el-input
+                    placeholder='搜索安装位置'
+                    @keyup.enter.native='queryTableList'
+                    @blur='queryTableList'
+                    clearable
+                    style='width:180px;margin-right:12px'
+                    size='small'
+                    prefix-icon='el-icon-search'
+                    v-model='wzjc'
+                ></el-input>
+                <!-- 多余的筛选 -->
+                <input-dialog :type='1' @confirm='confirm'></input-dialog>
+            </div>
+            <div class='gdqd-dialog-bottom'>
+                <el-table @row-click='innerTable' :data='tableData' :key='key' :border='true' style='width: 100%'>
+                    <el-table-column type='index' label='序号' width='60'></el-table-column>
+                    <el-table-column prop='sbjc' label='设备名称' show-overflow-tooltip resizable min-width='150'>
+                        <template slot-scope='{row}'>{{row.sbjc || '--'}}</template>
+                    </el-table-column>
+                    <el-table-column prop='assetnum' label='设备内码' show-overflow-tooltip resizable width='80'>
+                        <template slot-scope='{row}'>{{row.assetnum || '--'}}</template>
+                    </el-table-column>
+                    <!-- <el-table-column prop='sl' label='数量' width='60'>
+                        <template slot-scope='{row}'>{{row.sl>=0?row.sl:'--'}}</template>
+                    </el-table-column>-->
+                    <el-table-column prop='sbglgs' label='管理归属' show-overflow-tooltip resizable>
+                        <template slot-scope='{row}'>{{row.sbglgs || '--'}}</template>
+                    </el-table-column>
+                    <el-table-column prop='sb_status' label='设备状态' width='80' show-overflow-tooltip resizable>
+                        <template slot-scope='{row}'>{{row.sb_status || '--'}}</template>
+                    </el-table-column>
+                    <el-table-column prop='brand' label='品牌' show-overflow-tooltip resizable width='80'>
+                        <template slot-scope='{row}'>{{row.brand || '--'}}</template>
+                    </el-table-column>
+                    <el-table-column prop='sbxh' label='型号' show-overflow-tooltip resizable width='80'>
+                        <template slot-scope='{row}'>{{row.sbxh || '--'}}</template>
+                    </el-table-column>
+                    <el-table-column prop='floor' sortable label='楼层' width='70' show-overflow-tooltip resizable>
+                        <template slot-scope='{row}'>{{row.floorcode || '--'}}</template>
+                    </el-table-column>
+                    <el-table-column prop='wzjc' label='安装位置' show-overflow-tooltip resizable min-width='150'>
+                        <template slot-scope='{row}'>{{row.wzjc || '--'}}</template>
+                    </el-table-column>
+                    <el-table-column prop='manufacturer' label='生产厂商' show-overflow-tooltip resizable min-width='150'>
+                        <template slot-scope='{row}'>{{row.manufacturer || '--'}}</template>
+                    </el-table-column>
+                    <el-table-column prop='fws' label='服务商' show-overflow-tooltip resizable min-width='150'>
+                        <template slot-scope='{row}'>{{row.fws || '--'}}</template>
+                    </el-table-column>
+                    <el-table-column prop label='相关资料' show-overflow-tooltip resizable min-width='150'>
+                        <template slot-scope='{row}'>{{'--'}}</template>
+                    </el-table-column>
+                </el-table>
+            </div>
         </div>
-        <el-table @row-click='innerTable' :data='tableData' :key='key' :border='true' style='width: 100%;amrgin-bottom:30px'>
-            <el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column>
-            <el-table-column prop='sbjc' label='设备名称' show-overflow-tooltip resizable min-width='150'>
-                <template slot-scope='{row}'>{{row.sbjc || '--'}}</template>
-            </el-table-column>
-            <el-table-column prop='assetnum' label='设备内码' show-overflow-tooltip resizable width='80'>
-                <template slot-scope='{row}'>{{row.assetnum || '--'}}</template>
-            </el-table-column>
-            <el-table-column prop='sl' label='数量' width='60'>
-                <template slot-scope='{row}'>{{row.sl>=0?row.sl:'--'}}</template>
-            </el-table-column>
-            <el-table-column prop='sbglgs' label='管理归属' show-overflow-tooltip resizable>
-                <template slot-scope='{row}'>{{row.sbglgs || '--'}}</template>
-            </el-table-column>
-            <el-table-column prop='sb_status' label='设备状态' width='80' show-overflow-tooltip resizable>
-                <template slot-scope='{row}'>{{row.sb_status || '--'}}</template>
-            </el-table-column>
-            <el-table-column prop='brand' label='品牌' show-overflow-tooltip resizable width='80'>
-                <template slot-scope='{row}'>{{row.brand || '--'}}</template>
-            </el-table-column>
-            <el-table-column prop='sbxh' label='型号' show-overflow-tooltip resizable width='80'>
-                <template slot-scope='{row}'>{{row.sbxh || '--'}}</template>
-            </el-table-column>
-            <el-table-column prop='floor' sortable label='楼层' width='70' show-overflow-tooltip resizable>
-                <template slot-scope='{row}'>{{row.floorcode || '--'}}</template>
-            </el-table-column>
-            <el-table-column prop='wzjc' label='安装位置' show-overflow-tooltip resizable min-width='150'>
-                <template slot-scope='{row}'>{{row.wzjc || '--'}}</template>
-            </el-table-column>
-            <el-table-column prop='manufacturer' label='生产厂商' show-overflow-tooltip resizable min-width='150'>
-                <template slot-scope='{row}'>{{row.manufacturer || '--'}}</template>
-            </el-table-column>
-            <el-table-column prop='fws' label='服务商' show-overflow-tooltip resizable min-width='150'>
-                <template slot-scope='{row}'>{{row.fws || '--'}}</template>
-            </el-table-column>
-            <el-table-column prop label='相关资料' show-overflow-tooltip resizable min-width='150'>
-                <template slot-scope='{row}'>{{'--'}}</template>
-            </el-table-column>
-        </el-table>
-        <div class='foot'>
-            <el-pagination
-                background
-                layout='prev, pager, next'
-                :total='total'
-                :current-page.sync='page'
-                :page-size='size'
-                @prev-click='pageChanged'
-                @next-click='pageChanged'
-                @current-change='pageChanged'
-            ></el-pagination>
+        <div class='qdxq-bottom'>
+            <div class='wb-title'>
+                <el-tabs v-model='activeName1' @tab-click='handleClickWb' style='width:100%'>
+                    <!-- <span class='span1'>维保:</span> -->
+                    <el-tab-pane label='重要维保' name='wb1' v-if='Object.keys(this.row).length>0'>
+                        <wbTable ref='wb1' :smsxt='smsxt' tabLabel='重要维保' :diff='diff' :assetnum='row.assetnum' :size='5'></wbTable>
+                    </el-tab-pane>
+                    <el-tab-pane label='日常维保' name='wb2' v-if='Object.keys(this.row).length>0'>
+                        <rcwbTable ref='wb2' :smsxt='smsxt' tabLabel='日常维保' :diff='diff' :assetnum='row.assetnum' :size='5'></rcwbTable>
+                    </el-tab-pane>
+                    <!-- <span class='span1'>维修:</span> -->
+                    <el-tab-pane label='重要维修' name='wx1' v-if='Object.keys(this.row).length>0'>
+                        <wxTable ref='wx1' :smsxt='smsxt' tabLabel='重要维修' :diff='diff' :assetnum='row.assetnum' :size='5'></wxTable>
+                    </el-tab-pane>
+                    <el-tab-pane label='日常维修' name='wx2' v-if='Object.keys(this.row).length>0'>
+                        <rcwxTable ref='wx2' :smsxt='smsxt' tabLabel='日常维修' :diff='diff' :assetnum='row.assetnum' :size='5'></rcwxTable>
+                    </el-tab-pane>
+                </el-tabs>
+            </div>
         </div>
     </div>
 </template>
@@ -116,20 +128,14 @@ import { mapGetters } from 'vuex'
 import { queryAsset } from '@/api/equipmentList.js'
 import { querySelect } from '@/api/public.js'
 import inputDialog from './inputDIalog'
+import rcwbTable from './rcwbTable'
+import wbTable from './wbTable'
+import rcwxTable from './rcwxTable'
+import wxTable from './wxTable'
 export default {
     data() {
         return {
             tableData: [],
-            dataSelect2: [
-                { id: 'test1', name: '选择项' },
-                { id: 'test2', name: '单平米' },
-                { id: 'test3', name: '下级分项' },
-                { id: 'test4', name: '滑动平均滑动平均' },
-            ],
-            // page: 1,
-            size: 10,
-            total: 1,
-            page:1,
             sbjc: '',
             brand: '',
             wzjc: '',
@@ -141,35 +147,51 @@ export default {
             sbglgsOption: [],
             statusOption: [],
             floorAllSelect: [],
+            activeId: '1',
+            activeName1: 'wb1',
+            activeName2: '',
+            visible: false,
             key: 0,
         }
     },
     components: {
         Select,
         inputDialog,
+        rcwbTable,
+        wbTable,
+        rcwxTable,
+        wxTable,
     },
     computed: {
         ...mapGetters(['floorSelect']),
     },
-    props: ['row', 'major','sign'],
+    props: ['row', 'major', 'sign', 'smsxt', 'diff'],
     mounted() {
+        console.log(this.row)
         this.queryTableList()
         this.tabFind()
         this.getFloorAllSelect()
     },
     methods: {
+        tabClick(item) {
+            this.activeId = item
+        },
+        handleClickWb(label) {
+            if (this.$refs[`${label.name}`]) {
+                this.$refs[`${label.name}`].startMethods()
+            }
+        },
+        handleClickWx(label) {
+            if (this.$refs[`${label.name}`]) {
+                this.$refs[`${label.name}`].startMethods()
+            }
+        },
         innerTable(row) {
             console.log(row)
             if (row.assetuid) {
                 window.open(`http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=assetdevic&uniqueid=${row.assetuid}`)
             }
         },
-        //序号的方法
-        indexMethod(index) {
-            if (this.page) {
-                return (this.page - 1) * this.size + index + 1
-            }
-        },
         //多余输入框监听
         confirm(fws, manufacturer) {
             //console.log(fws, manufacturer, '------')
@@ -206,7 +228,7 @@ export default {
                 major: major,
                 plazaId: this.$store.state.plazaId,
             }
-            if(major!='土建'){
+            if (major != '土建') {
                 data.onlyMainAsset = true
             }
             querySelect({ data, postParams }).then((res) => {
@@ -237,10 +259,6 @@ export default {
                 })
             })
         },
-        pageChanged(page) {
-            this.page = page
-            this.queryTableList()
-        },
         queryTableList() {
             let major
             if (this.major.slice(0, 2) == 'GD') {
@@ -259,11 +277,9 @@ export default {
             let data = {
                 major: major,
                 plazaId: this.$store.state.plazaId,
-                page: this.page,
-                size: this.size,
             }
             //区分主要设备
-            if(this.major != '土建'){
+            if (this.major != '土建') {
                 data.onlyMainAsset = true
             }
             //输入框搜索
@@ -304,7 +320,7 @@ export default {
                 postParams.status = this.status
             }
             queryAsset({ data, postParams }).then((res) => {
-                //console.log(res)
+                console.log(res)
                 this.tableData = res.data.data
                 this.total = res.data.count
                 this.key++
@@ -321,11 +337,11 @@ export default {
             })
             console.log(this.floorAllSelect)
         },
-        changePageEvent(){
-            if(this.sign==1){
+        changePageEvent() {
+            if (this.sign == 1) {
                 this.page = 1
             }
-        }
+        },
     },
     watch: {
         row: {
@@ -354,22 +370,26 @@ export default {
 </script>
 <style lang="less" scoped>
 .gdqd-dialog {
-    // padding: 16px 24px 40px;
-    // height: 610px;
-    .gdqd-dialog-top {
-        display: flex;
-        margin-bottom: 12px;
-    }
-    td {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+    display: flex;
+    flex-direction: column;
+    height: 90vh;
+    .gdqd-top {
+        .gdqd-dialog-bottom {
+            overflow: auto;
+            max-height: 20vh;
+            margin-top: 20px;
+        }
     }
-    .foot {
-        height: 32px;
-        display: flex;
-        justify-content: flex-end;
-        margin-top: 28px;
+    .qdxq-bottom {
+        flex: 1;
+        .wb-title {
+            display: flex;
+            height: 48px;
+            line-height: 48px;
+            background: #f5f6f7;
+            margin: 20px 0;
+            padding-left: 20px;
+        }
     }
 }
 @media screen and (max-width: 1600px) {
@@ -383,5 +403,71 @@ export default {
     /deep/.el-table td {
         cursor: pointer;
     }
+    .el-dialog__header {
+        padding: 16px 24px;
+        color: #fff;
+        background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
+    }
+    .el-dialog__headerbtn .el-dialog__close {
+        color: #fff;
+    }
+    .el-dialog__title {
+        font-size: 16px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #fff;
+        line-height: 24px;
+    }
+    .qdxq-bottom {
+        .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
+        .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
+        .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
+        .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
+            padding-left: 16px;
+        }
+        .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
+        .el-tabs--bottom .el-tabs__item.is-top:last-child,
+        .el-tabs--top .el-tabs__item.is-bottom:last-child,
+        .el-tabs--top .el-tabs__item.is-top:last-child {
+            padding-right: 16px;
+        }
+        .el-tabs__nav-wrap::after {
+            height: 0;
+        }
+        .el-tabs {
+            // height: 95vh;
+        }
+        .el-tabs__content {
+            /deep/ .el-tab-pane > div {
+                height: 100% !important;
+            }
+        }
+        .is-active {
+            color: #025baa !important;
+            border-color: #025baa !important;
+        }
+        .el-tabs__item {
+            padding: 5px 16px;
+            height: 30px;
+            line-height: 22px;
+            font-size: 14px;
+            font-family: MicrosoftYaHei;
+            color: rgba(31, 36, 41, 1);
+            border: 1px solid rgba(195, 199, 203, 1);
+        }
+
+        /deep/ .el-tabs__item:last-child {
+            border-radius: 0px 4px 4px 0px;
+        }
+        /deep/ .el-tabs__item:nth-child(2) {
+            border-radius: 4px 0px 0px 4px;
+        }
+        .el-tab-pane {
+            height: 100% !important;
+        }
+        .el-tabs__active-bar {
+            background-color: transparent !important;
+        }
+    }
 }
 </style>