设备树组件和使用页面样式优化

src/components/module_ems/UEquipmentTree/UEquipmentTree.vue

@@ -1,35 +1,25 @@
 <template>
-  <a-card :bordered="false">
-    <!-- <div class="tree">
-    </div> -->
-    <div>
-      <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" />
+  <div class="equipment-tree-container">
+    <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" />
+    <div class="tree-container">
       <a-tree
         :expanded-keys="expandedKeys"
         auto-expand-parent
         :tree-data="tpmTreeData"
         @expand="onExpand"
         :replace-fields="replaceFields"
-        :filter-tree-node="filterTreeNode"
         @select="selectNode"
         >
-        <!-- <template slot="title" slot-scope="{ title }">
-          <span v-if="name.indexOf(searchValue) > -1">
-          {{ name.substr(0, name.indexOf(searchValue)) }}
-          <span style="color: #f50">{{ searchValue }}</span>
-          {{ name.substr(name.indexOf(searchValue) + searchValue.length) }}
-          </span>
-          <span v-else>{{ title }}</span>
-        </template> -->
+        <!-- :filter-tree-node="filterTreeNode" -->
       </a-tree>
     </div>
-  </a-card>
+  </div>
 </template>
 
 <script>
   import { getAction } from '@api/manage'
   export default({
-    name: 'DeviceList',
+    name: 'UEquipmentTree',
     components: {
     },
     data () {
@@ -136,9 +126,14 @@
   })
 </script>
 
-<style scoped>
-.tree{
-  height: calc(100vh - 185px);
+<style lang="less" scoped>
+.equipment-tree-container{
   width: 100%;
+  height: 100%;
+  .tree-container{
+    width: 100%;
+    height: calc(100% - 40px);
+    overflow: auto;
+  }
 }
 </style>

src/views/module_cmms/inspectContent/InspectContentList.vue

@@ -1,128 +1,121 @@
 <template>
   <a-card :bordered="false">
-    <a-row >
-      <a-col :span="4">
-        <u-equipment-tree @select="selectEquipment"></u-equipment-tree>
-      </a-col>
-      <a-col :span="20">
-        <!-- 查询区域 -->
-        <div class="table-page-search-wrapper">
-          <a-form layout="inline" @keyup.enter.native="searchQuery">
-            <a-row :gutter="24">
-              <a-col :xl="6" :lg="7" :md="8" :sm="24">
-                <a-form-item label="巡检内容名称">
-                  <a-input placeholder="请输入巡检内容名称" v-model="queryParam.contentname"></a-input>
-                </a-form-item>
-              </a-col>
-              <a-col :xl="6" :lg="7" :md="8" :sm="24">
-                <a-form-item label="设备id">
-                  <a-input placeholder="请输入设备id" v-model="queryParam.equipmentid"></a-input>
-                </a-form-item>
-              </a-col>
-              <template v-if="toggleSearchStatus">
-                <a-col :xl="6" :lg="7" :md="8" :sm="24">
-                  <a-form-item label="状态">
-                    <a-input placeholder="请选择状态" v-model="queryParam.status"></a-input>
-                  </a-form-item>
-                </a-col>
-              </template>
-              <a-col :xl="6" :lg="7" :md="8" :sm="24">
-                <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-                  <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
-                  <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
-                  <a @click="handleToggleSearch" style="margin-left: 8px">
-                    {{ toggleSearchStatus ? '收起' : '展开' }}
-                    <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
-                  </a>
-                </span>
-              </a-col>
-            </a-row>
-          </a-form>
-        </div>
-        <!-- 查询区域-END -->
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <a-form-item label="巡检内容名称">
+              <a-input placeholder="请输入巡检内容名称" v-model="queryParam.contentname"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <a-form-item label="设备id">
+              <a-input placeholder="请输入设备id" v-model="queryParam.equipmentid"></a-input>
+            </a-form-item>
+          </a-col>
+          <template v-if="toggleSearchStatus">
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="状态">
+                <a-input placeholder="请选择状态" v-model="queryParam.status"></a-input>
+              </a-form-item>
+            </a-col>
+          </template>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+              <a @click="handleToggleSearch" style="margin-left: 8px">
+                {{ toggleSearchStatus ? '收起' : '展开' }}
+                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
+              </a>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!-- 查询区域-END -->
 
-        <!-- 操作按钮区域 -->
-        <div class="table-operator">
-          <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
-          <a-button type="primary" icon="download" @click="handleExportXls('巡检内容')">导出</a-button>
-          <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
-            <a-button type="primary" icon="import">导入</a-button>
-          </a-upload>
-          <!-- 高级查询区域 -->
-          <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
-          <a-dropdown v-if="selectedRowKeys.length > 0">
-            <a-menu slot="overlay">
-              <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
-            </a-menu>
-            <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
-          </a-dropdown>
-        </div>
+    <!-- 操作按钮区域 -->
+    <div class="table-operator">
+      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
+      <a-button type="primary" icon="download" @click="handleExportXls('巡检内容')">导出</a-button>
+      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
+        <a-button type="primary" icon="import">导入</a-button>
+      </a-upload>
+      <!-- 高级查询区域 -->
+      <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
+      <a-dropdown v-if="selectedRowKeys.length > 0">
+        <a-menu slot="overlay">
+          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
+      </a-dropdown>
+    </div>
 
-        <!-- table区域-begin -->
-        <div>
-          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
-            <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
-            <a style="margin-left: 24px" @click="onClearSelected">清空</a>
-          </div>
+    <!-- table区域-begin -->
+    <div>
+      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
+        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
+        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
+      </div>
 
-          <a-table
-            ref="table"
-            size="middle"
-            :scroll="{x:true}"
-            bordered
-            rowKey="id"
-            :columns="columns"
-            :dataSource="dataSource"
-            :pagination="ipagination"
-            :loading="loading"
-            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-            class="j-table-force-nowrap"
-            @change="handleTableChange">
+      <a-table
+        ref="table"
+        size="middle"
+        :scroll="{x:true}"
+        bordered
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+        class="j-table-force-nowrap"
+        @change="handleTableChange">
 
-            <template slot="htmlSlot" slot-scope="text">
-              <div v-html="text"></div>
-            </template>
-            <template slot="imgSlot" slot-scope="text,record">
-              <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
-              <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
-            </template>
-            <template slot="fileSlot" slot-scope="text">
-              <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
-              <a-button
-                v-else
-                :ghost="true"
-                type="primary"
-                icon="download"
-                size="small"
-                @click="downloadFile(text)">
-                下载
-              </a-button>
-            </template>
+        <template slot="htmlSlot" slot-scope="text">
+          <div v-html="text"></div>
+        </template>
+        <template slot="imgSlot" slot-scope="text,record">
+          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
+          <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
+        </template>
+        <template slot="fileSlot" slot-scope="text">
+          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
+          <a-button
+            v-else
+            :ghost="true"
+            type="primary"
+            icon="download"
+            size="small"
+            @click="downloadFile(text)">
+            下载
+          </a-button>
+        </template>
 
-            <span slot="action" slot-scope="text, record">
-              <a @click="handleEdit(record)">编辑</a>
+        <span slot="action" slot-scope="text, record">
+          <a @click="handleEdit(record)">编辑</a>
 
-              <a-divider type="vertical" />
-              <a-dropdown>
-                <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
-                <a-menu slot="overlay">
-                  <a-menu-item>
-                    <a @click="handleDetail(record)">详情</a>
-                  </a-menu-item>
-                  <a-menu-item>
-                    <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
-                      <a>删除</a>
-                    </a-popconfirm>
-                  </a-menu-item>
-                </a-menu>
-              </a-dropdown>
-            </span>
+          <a-divider type="vertical" />
+          <a-dropdown>
+            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
+            <a-menu slot="overlay">
+              <a-menu-item>
+                <a @click="handleDetail(record)">详情</a>
+              </a-menu-item>
+              <a-menu-item>
+                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
+                  <a>删除</a>
+                </a-popconfirm>
+              </a-menu-item>
+            </a-menu>
+          </a-dropdown>
+        </span>
 
-          </a-table>
-        </div>
+      </a-table>
+    </div>
 
-      </a-col>
-    </a-row>
     <inspect-content-modal ref="modalForm" @ok="modalFormOk"></inspect-content-modal>
   </a-card>
 </template>
@@ -210,9 +203,6 @@
       },
     },
     methods: {
-      selectEquipment(selectedKeys, e){
-        console.log(selectedKeys, e)
-      },
       initDictConfig(){
       },
       getSuperFieldList(){

src/views/module_cmms/inspectContent/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="all u-flex">
+    <div class="left">
+      <u-equipment-tree @select="selectEquipment"></u-equipment-tree>
+    </div>
+    <div class="right">
+      <inspect-content-list></inspect-content-list>
+    </div>
+  </div>
+</template>
+
+<script>
+  import InspectContentList from "./InspectContentList.vue";
+  export default({
+    components: {
+      InspectContentList
+    },
+    data () {
+      return {
+      }
+    },
+    created() {
+      
+    },
+    methods: {
+      selectEquipment(selectedKeys, e){
+        console.log(selectedKeys, e)
+      },
+    },
+  })
+</script>
+
+<style scoped>
+  .all{
+    height: calc(100vh - 135px);
+    width: 100%;
+    display: flex;
+  }
+  .left{
+    min-width: 200px;
+    max-width: 240px;
+    height: 100%;
+    padding: 15px;
+    margin-right: 10px;
+    margin-left: 5px;
+    background-color: #fff;
+  }
+  .right{
+    flex: 1;
+    height: 100%;
+  }
+</style>